| <!DOCTYPE html> |
| <title>fieldset and shadow DOM</title> |
| <link rel=fieldset-foo-ref.html> |
| <p>There should be a normal fieldset below with the legend "Foo".</p> |
| <template id="my-fieldset"> |
| <fieldset><slot name="my-text"></slot></fieldset> |
| </template> |
| |
| <my-fieldset> |
| <legend slot="my-text">Foo</legend> |
| </my-fieldset> |
| |
| <script> |
| customElements.define('my-fieldset', |
| class extends HTMLElement { |
| constructor() { |
| super(); |
| |
| const template = document.getElementById('my-fieldset'); |
| const templateContent = template.content; |
| |
| this.attachShadow({mode: 'open'}).appendChild( |
| templateContent.cloneNode(true) |
| ); |
| } |
| } |
| ); |
| </script> |