2024-03-06 08:53:10 +00:00
|
|
|
<script type="module">
|
|
|
|
import AdoptStyles from "/AdoptStyles.js"
|
|
|
|
customElements.define("adopt-styles", AdoptStyles)
|
|
|
|
</script>
|
|
|
|
|
2024-02-29 13:34:38 +00:00
|
|
|
<style>
|
|
|
|
.inline { color: red }
|
|
|
|
@layer foo {
|
|
|
|
.layer { color: purple }
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="/linked.css">
|
|
|
|
|
|
|
|
<my-component>
|
|
|
|
<template shadowrootmode="open">
|
2024-03-06 08:53:10 +00:00
|
|
|
<adopt-styles adopt="all"></adopt-styles>
|
2024-02-29 13:34:38 +00:00
|
|
|
<p class="inline">Inline</p>
|
2024-03-06 09:38:33 +00:00
|
|
|
<p class="layer">Layer</p>
|
2024-02-29 13:34:38 +00:00
|
|
|
<p class="linked">Linked</p>
|
|
|
|
</template>
|
|
|
|
</my-component>
|