Created
August 15, 2017 09:58
-
-
Save gregorypratt/e1c390ca2b99f18ca78b21b6d6f60c87 to your computer and use it in GitHub Desktop.
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
| class HelloWorld extends HTMLElement { | |
| constructor() { | |
| super(); | |
| console.log('constructor'); | |
| const shadowRoot = this.attachShadow({mode: 'open'}); | |
| shadowRoot.innerHTML = ` | |
| <h2>Example heading (scoped style)</h2> | |
| <slot name="first"></slot> | |
| <slot name="second"></slot> | |
| <button></button> | |
| <slot></slot> | |
| <style> | |
| :host { | |
| font-family: Arial; | |
| } | |
| ::slotted(div) { | |
| border: 1px solid black; | |
| } | |
| </style> | |
| `; | |
| } | |
| static get is() { | |
| return 'hello-world'; | |
| } | |
| static get observedAttributes() { | |
| return ['text']; | |
| } | |
| get text() { | |
| return this.getAttribute('text'); | |
| } | |
| set text(val) { | |
| this.setAttribute('text', val); | |
| } | |
| get message() { | |
| return this.getAttribute('message'); | |
| } | |
| set message(val) { | |
| this.setAttribute('message', val); | |
| } | |
| render() { | |
| console.log('render'); | |
| // | |
| // Could do with some template engine here 👇 | |
| // | |
| this.shadowRoot.querySelector('button').textContent = this.text; | |
| } | |
| connectedCallback() { | |
| console.log('connectedCallback: inserted into the DOM'); | |
| this.shadowRoot.querySelector('button').addEventListener('click', () => { | |
| alert(this.message); | |
| }); | |
| } | |
| disconnectedCallback() { | |
| console.log('disconnectedCallback: removed from the DOM'); | |
| } | |
| attributeChangedCallback(attrName, oldVal, newVal) { | |
| console.log('attributeChangedCallback: HTML attribute changed', {attrName}, {oldVal}, {newVal}); | |
| this.render(); | |
| } | |
| adoptedCallback() { | |
| console.log('adoptedCallback: element moved into a new document'); | |
| } | |
| } | |
| customElements.define(HelloWorld.is, HelloWorld); |
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> | |
| <meta charset="utf-8"> | |
| <title>Hello Web Component</title> | |
| <!-- To make it work with browsers that don't support Web Components yet read this --> | |
| <!--https://github.com/WebComponents/webcomponentsjs--> | |
| <script src="./hello-world.js"></script> | |
| </head> | |
| <body> | |
| <h1>Custom Element Example</h1> | |
| <!-- Run custom element --> | |
| <hello-world text="Click me" message="Hello world!"> | |
| <div slot="second">This goes into the second slot</div> | |
| <div slot="first">This goes into the first slot</div> | |
| <div>This and the following <code><div></code></div> | |
| <div>all pile into the next available slot</div> | |
| </hello-world> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment