Live
x
<h2>Shadow DOM</h2><my-element></my-element><h2>Light DOM</h2><my-element-light> <p>This is inside the Light DOM. (pタグ要素)</p></my-element-light><h2>CSS</h2><code>p { color: red;}</code>
Live
xxxxxxxxxx3
p { color: red; /* Shadow DOM内の<p>には適用されない */}
Live
xxxxxxxxxx23
class MyElement extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); // Shadow DOMを有効化 (openモード) this.shadowRoot.innerHTML = ` <style> p { color: blue; /* Shadow DOM内のスタイル (優先される) */ } </style> <p class="red">This is inside the Shadow DOM. (pタグ要素)</p> `; } } customElements.define('my-element', MyElement);class MyElementLight extends HTMLElement { constructor() { super(); // Shadow DOMは使用しない } } customElements.define('my-element-light', MyElementLight);
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.