1059138-1.html (1014B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Testcase for bug 1059138</title> 6 <template> 7 <div class="inner" style="border: 1px solid black; display:flex; width: 500px;"> 8 <button class="action-button"> 9 ThisIsAButton 10 </button> 11 <slot></slot> 12 </div> 13 </template> 14 15 <script> 16 // Gets content from <template> 17 var template = document.querySelector('template').content; 18 19 // Creates an object based in the HTML Element prototype 20 class MyElement extends HTMLElement { 21 // Fires when an instance of the element is connected 22 connectedCallback() { 23 // Creates the shadow root 24 var shadowRoot = this.attachShadow({ mode: "open" }); 25 26 // Adds a template clone into shadow root 27 var clone = document.importNode(template, true); 28 shadowRoot.appendChild(clone); 29 } 30 }; 31 // Registers <my-elem> in the main document 32 customElements.define('my-elem', MyElement); 33 </script> 34 </head> 35 <body> 36 <my-elem><div>ThisIsADivFlexItem</div></my-elem> 37 </body> 38 </html>