Last active
August 15, 2018 06:19
-
-
Save kitsune7/2e9cc2a25acec8a4c5f5e97492a296f9 to your computer and use it in GitHub Desktop.
Web component using html imports
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
| <template id="hello-world-template"> | |
| <div class="hello-world"> | |
| <h1>Hello, World!</h1> | |
| </div> | |
| </template> |
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 { | |
| createdCallback () { | |
| console.log('RUNNING -- createdCallback') | |
| const templates = document.getElementById('templates').import | |
| const template = templates.getElementById('hello-world-template') | |
| this.attachShadow({ mode: 'open' }) | |
| .appendChild(template.content.cloneNode(true)) | |
| } | |
| } | |
| document.registerElement('hello-world', 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 lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Native component test</title> | |
| <link rel="import" href="hello-world.html" id="templates" /> | |
| <script src="HelloWorld.js" defer></script> | |
| </head> | |
| <body> | |
| <hello-world /> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment