fieldset-shadow-dom.html (668B)
1 <!DOCTYPE html> 2 <title>fieldset and shadow DOM</title> 3 <link rel=fieldset-foo-ref.html> 4 <p>There should be a normal fieldset below with the legend "Foo".</p> 5 <template id="my-fieldset"> 6 <fieldset><slot name="my-text"></slot></fieldset> 7 </template> 8 9 <my-fieldset> 10 <legend slot="my-text">Foo</legend> 11 </my-fieldset> 12 13 <script> 14 customElements.define('my-fieldset', 15 class extends HTMLElement { 16 constructor() { 17 super(); 18 19 const template = document.getElementById('my-fieldset'); 20 const templateContent = template.content; 21 22 this.attachShadow({mode: 'open'}).appendChild( 23 templateContent.cloneNode(true) 24 ); 25 } 26 } 27 ); 28 </script>