Welcome to {{ project.name }}
- Here's a vanilla custom element:
-
+ Here's an interactive custom element:
+
-class HelloWorld extends HTMLElement {
- static get observedAttributes() {
- return ["my-name"];
+class MyHelloWorld extends WebComponent {
+ static props = {
+ myName: "World",
+ count: 0
}
- connectedCallback() {
- let count = 0;
- const currentName = this.getAttribute("my-name");
-
- if (!currentName) {
- this.setAttribute("my-name", "World")
- }
-
- this.onclick = () => {
- this.setAttribute("my-name", `Clicked ${++count}x`);
- };
+ updateLabel() {
+ this.props.myName = `Clicked ${++this.props.count}x`;
}
- attributeChangedCallback(property, previousValue, currentValue) {
- if (property === "my-name" && previousValue !== currentValue) {
- this.innerHTML = `<button style="cursor:pointer">Hello ${currentValue}!</button>`;
- }
+ get template() {
+ return html`
+ <button onClick=${() => this.updateLabel()} style="cursor:pointer">
+ Hello ${this.props.myName}!
+ </button>`;
}
-}
-
+}