38 lines
1,014 B
HTML
38 lines
1,014 B
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Testcase for bug 1059138</title>
|
|
<template>
|
|
<div class="inner" style="border: 1px solid black; display:flex; width: 500px;">
|
|
<button class="action-button">
|
|
ThisIsAButton
|
|
</button>
|
|
<slot></slot>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// Gets content from <template>
|
|
var template = document.querySelector('template').content;
|
|
|
|
// Creates an object based in the HTML Element prototype
|
|
class MyElement extends HTMLElement {
|
|
// Fires when an instance of the element is connected
|
|
connectedCallback() {
|
|
// Creates the shadow root
|
|
var shadowRoot = this.attachShadow({ mode: "open" });
|
|
|
|
// Adds a template clone into shadow root
|
|
var clone = document.importNode(template, true);
|
|
shadowRoot.appendChild(clone);
|
|
}
|
|
};
|
|
// Registers <my-elem> in the main document
|
|
customElements.define('my-elem', MyElement);
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<my-elem><div>ThisIsADivFlexItem</div></my-elem>
|
|
</body>
|
|
</html>
|