2025-03-18 15:28:35 -03:00
|
|
|
<!DOCTYPE html>
|
2024-06-25 11:19:44 -03:00
|
|
|
<div id="basicOpen">
|
|
|
|
|
<template shadowrootmode="open">open</template>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="basicClosed">
|
|
|
|
|
<template shadowrootmode="closed">closed</template>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="redundant">
|
|
|
|
|
<template shadowrootmode="open">open</template>
|
|
|
|
|
<template shadowrootmode="open">also open</template>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="basicOpenClonable">
|
|
|
|
|
<template shadowrootmode="open" shadowrootclonable>open</template>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="basicOpenSerializable">
|
|
|
|
|
<template shadowrootmode="open" shadowrootserializable>open</template>
|
|
|
|
|
</div>
|
2026-05-16 04:05:40 -03:00
|
|
|
<div id="manualSlotAssignment">
|
|
|
|
|
<template shadowrootmode="OpEn" shadowrootslotassignment="MANUAL" shadowrootserializable><slot name="slot"></slot></template>
|
|
|
|
|
<span slot="slot">manual</span>
|
|
|
|
|
</div>
|
2024-06-25 11:19:44 -03:00
|
|
|
<script src="../include.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
test(() => {
|
|
|
|
|
println(basicOpen.shadowRoot);
|
|
|
|
|
println(basicOpen.childElementCount);
|
|
|
|
|
|
|
|
|
|
println(basicClosed.shadowRoot);
|
|
|
|
|
println(basicClosed.childElementCount);
|
|
|
|
|
|
|
|
|
|
println(redundant.shadowRoot);
|
|
|
|
|
println(redundant.childElementCount);
|
|
|
|
|
|
|
|
|
|
let clonedUnclonable = basicOpen.cloneNode();
|
|
|
|
|
println(clonedUnclonable.shadowRoot);
|
|
|
|
|
println(clonedUnclonable.childElementCount);
|
|
|
|
|
|
|
|
|
|
let clonedClonable = basicOpenClonable.cloneNode();
|
|
|
|
|
println(clonedClonable.shadowRoot);
|
|
|
|
|
println(clonedClonable.childElementCount);
|
|
|
|
|
|
|
|
|
|
println(basicOpen.getHTML({ serializableShadowRoots: true}));
|
|
|
|
|
println(basicOpen.getHTML({ shadowRoots: [ basicOpen.shadowRoot ]}));
|
|
|
|
|
println(basicOpenSerializable.getHTML({ serializableShadowRoots: true}));
|
|
|
|
|
println(basicOpenSerializable.getHTML({ serializableShadowRoots: false}));
|
|
|
|
|
println(basicOpenSerializable.getHTML({ shadowRoots: [ basicOpenSerializable.shadowRoot ]}));
|
2026-05-16 04:05:40 -03:00
|
|
|
|
|
|
|
|
println(manualSlotAssignment.shadowRoot.slotAssignment);
|
|
|
|
|
println(manualSlotAssignment.querySelector("span").assignedSlot);
|
|
|
|
|
println(manualSlotAssignment.getHTML({ serializableShadowRoots: true}));
|
|
|
|
|
|
|
|
|
|
let template = document.createElement("template");
|
|
|
|
|
println(template.shadowRootSlotAssignment);
|
|
|
|
|
template.shadowRootSlotAssignment = "MANUAL";
|
|
|
|
|
println(template.shadowRootSlotAssignment);
|
|
|
|
|
template.shadowRootSlotAssignment = "invalid";
|
|
|
|
|
println(template.shadowRootSlotAssignment);
|
|
|
|
|
template.setAttribute("shadowrootslotassignment", "bogus");
|
|
|
|
|
println(template.shadowRootSlotAssignment);
|
2024-06-25 11:19:44 -03:00
|
|
|
});
|
|
|
|
|
</script>
|
