Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 2x 2x 2x 2x 2x 2x 3x 3x | import { CssChain as $$ } from "./CssChain.js";
const templateStr=`
<i>out of slot</i>
<style>
div{padding: 0 1rem}
slot{ color: red}
p>slot{ color: darkviolet;}
slot slot{ color: green;}
slot slot slot{ color: blue;}
</style>
<slot style="background-color:red ">
default slot
<div><slot name="inner-1">inner 1</slot></div>
<div>
<slot name="inner-2">inner 2
<div><slot name="inner-2-1">inner 1 in 2</slot></div>
<div><slot name="inner-2-2">inner 2 in 2</slot></div>
</slot>
</div>
</slot>
<p>
prefix
<slot name="outer">
outer slot
<script type="bogus">ignore it</script>
</slot>
suffix
</p>
`;
class SlotsInShadowDemo extends HTMLElement
{
constructor()
{ super();
let template = document.createElement('template');
template.innerHTML = templateStr;
this.attachShadow({mode: 'open'}).appendChild(template.content);
this.$ = css => css ? $$(css,this.shadowRoot) : $$(this.shadowRoot);
}
}
window.customElements.define( 'slots-in-shadow', SlotsInShadowDemo);
|