<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 &lt;html&gt; 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);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.