Created
March 21, 2019 00:55
-
-
Save shannon/f2d30cb9d0091a0d9b5d82d5aaab07e5 to your computer and use it in GitHub Desktop.
HTML5 Meetup Custom Elements
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> | |
| <script type="module"> | |
| import { render, html } from 'https://unpkg.com/lit-html?module'; | |
| class SourceViewElement extends HTMLElement { | |
| constructor() { | |
| super(); | |
| this.attachShadow({ mode: 'open' }); | |
| } | |
| set src(value){ | |
| this.setAttribute('src', value) | |
| } | |
| get src(){ | |
| return this.getAttribute('src'); | |
| } | |
| static get observedAttributes() { | |
| return ['src', 'color']; | |
| } | |
| connectedCallback() { | |
| } | |
| async attributeChangedCallback(name, oldValue, newValue) { | |
| switch(name){ | |
| case 'src': | |
| this.contents = await fetch(newValue).then(res => res.text()); | |
| break; | |
| case 'color': | |
| this.color = newValue; | |
| break; | |
| } | |
| this.render(); | |
| } | |
| render() { | |
| const template = html` | |
| <style> | |
| code { | |
| color: ${this.color || 'black'}; | |
| } | |
| </style> | |
| <h4><slot></slot></h4> | |
| <pre><code>${this.contents || ''}</code></pre> | |
| `; | |
| render(template, this.shadowRoot); | |
| } | |
| } | |
| customElements.define('source-view', SourceViewElement); | |
| </script> | |
| </head> | |
| <body> | |
| <source-view src="./source-a.js" style="color:red"><a href="#">Test</a></source-view> | |
| <pre><code>This should not be green</code></pre> | |
| </body> | |
| </html> |
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
| function sourceA() { | |
| } |
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
| function sourceB() { | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment