Created
April 16, 2019 10:53
-
-
Save sarbull/f8552db3f68cbb850d5dfbe197e7844f to your computer and use it in GitHub Desktop.
HTML Custom Element with version tag
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Title of the document</title> | |
| </head> | |
| <body> | |
| <simple-component-0-0-4 first="Cezar" last="Sirbu"></simple-component-0-0-4> | |
| <script> | |
| class SimpleComponent extends HTMLElement { | |
| constructor() { | |
| super(); | |
| console.log('constructor()'); | |
| const template = this.template(); | |
| this.attachShadow({mode: 'open'}).appendChild( | |
| template.cloneNode(true) | |
| ); | |
| } | |
| static get is() { | |
| return 'simple-component-0-0-4'; | |
| } | |
| template() { | |
| const template = document.createElement('div'); | |
| template.innerHTML = `<h1>I am a Web Component created by ${this.getAttribute('first')} ${this.getAttribute('last')}</h1>`; | |
| return template; | |
| } | |
| attributeChangedCallback(name, oldValue, newValue) { | |
| this.updateTemplate(); | |
| console.log('attributeChangedCallback() = ', arguments); | |
| } | |
| updateTemplate() { | |
| this.shadowRoot.innerHTML = ''; | |
| this.shadowRoot.appendChild(this.template()); | |
| } | |
| static get observedAttributes() { | |
| return [ | |
| 'first', | |
| 'last' | |
| ]; | |
| } | |
| connectedCallback() { | |
| console.log('connectedCallback()'); | |
| } | |
| disconnectedCallback() { | |
| console.log('disconnectedCallback()'); | |
| } | |
| } | |
| window.customElements.define(SimpleComponent.is, SimpleComponent); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment