| <!DOCTYPE html> |
| <html> |
| <head> |
| <script> |
| class MyThing extends HTMLElement { |
| constructor() { |
| super(); |
| |
| this.shadow = this.attachShadow({ mode: 'open' }); |
| } |
| |
| connectedCallback() { |
| let style = document.createElement('style'); |
| style.innerText = '@import url("./styles.css");'; |
| |
| let h1 = document.createElement('h1'); |
| h1.innerText = 'I am a custom element'; |
| |
| document.body.appendChild(style); |
| this.shadow.appendChild(h1); |
| } |
| } |
| |
| customElements.define('my-thing', MyThing); |
| </script> |
| </head> |
| |
| <body> |
| <span>This renders</span> |
| <my-thing></my-thing> |
| <span>This should also render</span> |
| </body> |
| </html> |
