90 lines
2.2 KiB
HTML
90 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<body>
|
|
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
|
<div id="t1">
|
|
<span>FAIL</span>
|
|
</div>
|
|
<div id="t2">
|
|
<span slot="second-slot">FAIL</span>
|
|
</div>
|
|
<div id="t3">
|
|
<span>FAIL</span>
|
|
</div>
|
|
<div id="t4">
|
|
<span>FAIL</span>
|
|
</div>
|
|
<div id="t5">
|
|
<span selected>FAIL</span>
|
|
</div>
|
|
<div>
|
|
</div>
|
|
<script>
|
|
|
|
function attachShadow(host, selector)
|
|
{
|
|
const shadow = host.attachShadow({mode: 'closed'});
|
|
shadow.innerHTML = `
|
|
<style>
|
|
:host {
|
|
width: 100px;
|
|
height: 20px;
|
|
background: green;
|
|
color: red;
|
|
}
|
|
${selector} {
|
|
color: green;
|
|
}
|
|
</style>
|
|
<slot></slot>
|
|
<slot name="second-slot"></slot>`;
|
|
return shadow;
|
|
}
|
|
|
|
{
|
|
const host = document.querySelector('#t1');
|
|
attachShadow(host, '::slotted(.selected)');
|
|
const span = host.querySelector('span');
|
|
getComputedStyle(span).backgroundColor;
|
|
span.className = 'selected';
|
|
}
|
|
|
|
{
|
|
const host = document.querySelector('#t2');
|
|
attachShadow(host, '[name=second-slot]::slotted(#selected)');
|
|
const span = host.querySelector('span');
|
|
getComputedStyle(span).backgroundColor
|
|
span.id = 'selected';
|
|
}
|
|
|
|
{
|
|
const host = document.querySelector('#t3');
|
|
attachShadow(host, '::slotted([selected])');
|
|
const span = host.querySelector('span');
|
|
getComputedStyle(span).backgroundColor;
|
|
span.setAttribute('selected', 'selected');
|
|
}
|
|
|
|
{
|
|
const host = document.querySelector('#t4');
|
|
const shadow = host.attachShadow({mode: 'closed'});
|
|
shadow.innerHTML = `<div><slot></slot></div>`;
|
|
const deepHost = shadow.querySelector('div');
|
|
attachShadow(deepHost, '::slotted(.selected)');
|
|
const span = host.querySelector('span');
|
|
getComputedStyle(span).backgroundColor;
|
|
span.className = 'selected';
|
|
}
|
|
|
|
{
|
|
const host = document.querySelector('#t5');
|
|
const shadow = host.attachShadow({mode: 'closed'});
|
|
shadow.innerHTML = `<div><slot slot="second-slot"></slot></div>`;
|
|
const deepHost = shadow.querySelector('div');
|
|
attachShadow(deepHost, '[name=second-slot]::slotted(:not([selected]))');
|
|
const span = host.querySelector('span');
|
|
getComputedStyle(span).backgroundColor;
|
|
span.removeAttribute('selected');
|
|
}
|
|
|
|
</script>
|