From 1287b42186d7d05840e98387ded7be1c9cb0a535 Mon Sep 17 00:00:00 2001 From: Ayo Date: Sun, 17 Sep 2023 01:36:58 +0200 Subject: [PATCH] chore: formatting; add sample --- .vscode/settings.json | 3 +++ WebComponent.mjs | 2 +- demo/SimpleText.mjs | 16 ++++++++++++++++ demo/index.html | 31 ++++++++++++++++++++----------- 4 files changed, 40 insertions(+), 12 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 demo/SimpleText.mjs diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..23fd35f --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "editor.formatOnSave": true +} \ No newline at end of file diff --git a/WebComponent.mjs b/WebComponent.mjs index ac1b0c4..3ef10c5 100644 --- a/WebComponent.mjs +++ b/WebComponent.mjs @@ -20,7 +20,7 @@ export class WebComponent extends HTMLElement { this.render(); } - this.onChanges({previousValue, currentValue}); + this.onChanges({ previousValue, currentValue }); } render() { diff --git a/demo/SimpleText.mjs b/demo/SimpleText.mjs new file mode 100644 index 0000000..b866872 --- /dev/null +++ b/demo/SimpleText.mjs @@ -0,0 +1,16 @@ +// @ts-check +import WebComponent from "../index.mjs"; + +class SimpleText extends WebComponent { + greeting = "Hello"; + + static get observedAttributes() { + return ["greeting"]; + } + + get template() { + return `

Simple text ${this.greeting}

`; + } +} + +customElements.define("simple-text", SimpleText); diff --git a/demo/index.html b/demo/index.html index 17b26bd..07855ea 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1,12 +1,21 @@ - - - - - - + + + + + + + - \ No newline at end of file + helloWorld.setAttribute("emotion", "excited"); + }, 2500); + + +