<template id="red-span">
  <style>
    span { 
      color: red;
    }
  </style>
  <span>
    <slot/>
  </span>
</template>

<span>표준 요소</span>
<red-span>비표준 요소</red-span>

class RedSpan extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    const template = document.getElementById("red-span");
    const clone = template.content.cloneNode(true);
    this.shadowRoot.appendChild(clone);
  }
}

customElements.define('red-span', RedSpan);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.