36 lines
830 B
HTML
36 lines
830 B
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<body>
|
|
<my-element-outer></my-element-outer>
|
|
<script>
|
|
class MyElementInner extends HTMLElement {
|
|
connectedCallback() {
|
|
const sr = this.attachShadow({mode: 'open'})
|
|
sr.innerHTML = `
|
|
<slot name="named"></slot>
|
|
<div>
|
|
<slot></slot>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define('my-element-inner', MyElementInner);
|
|
|
|
class MyElementOuter extends HTMLElement {
|
|
connectedCallback() {
|
|
const sr = this.attachShadow({mode: 'open'})
|
|
sr.innerHTML = `
|
|
<my-element-inner>
|
|
<slot>default</slot>
|
|
<div slot="named">named slot<div>
|
|
</my-element-inner>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define('my-element-outer', MyElementOuter);
|
|
</script>
|
|
</body>
|
|
</html>
|