<p class="my-p">Light DOM on a page</p>
<my-component>
<p>Light DOM inside WC slot: Shadow DOM CSS told me to be underlined</p>
</my-component>
<template id="my-component">
<!-- This is shared CSS that you can include in every component -->
<link rel="stylesheet" href="https://codepen.io/stylet/pen/QXYwbW.css">
<style>
:host {
display: block;
}
p::after { /* Affects Shadow DOM only */
color: black;
border: 1px solid black;
margin-left: 5px;
content: "(I'm Shadow DOM CSS)"
}
::slotted(p) { /* Affects slot content within Shadow DOM only */
text-decoration: underline;
}
/* Doesn't work in Safari */
::slotted(p)::before { /* Affects slot content within Shadow DOM only */
color: black;
border: 1px solid black;
margin-right: 5px;
content: "(I'm Shadow DOM CSS for slot content)"
}
</style>
<p>Shadow DOM: I inherited red color from <html> element</p>
<slot></slot>
</template>
p::after { /* Affects Light DOM only */
color: black;
border: 1px solid black;
margin-left: 5px;
content: "(I'm Light DOM CSS)"
}
html {
color: green; /* Affects Light and Shadow DOM because color is inherited property */
}
'use strict';
const template = document.getElementById('my-component');
class MyContext extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.appendChild(template.content.cloneNode(true));
};
};
customElements.define('my-component', MyContext);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.