ShadowDOM中扩展原生元素的样式实现：是否存在冗余p元素？

你的思路是对的：ShadowDOM内的样式只能作用于其内部声明的元素，但针对**扩展原生元素（Customized Built-in Elements）**的场景，你代码里的内部<p>确实是冗余的，可以优化掉。

为什么内部p是冗余的？ #

你通过extends HTMLParagraphElement定义的自定义元素，本质是增强原生<p>的功能——<p is="omer-p">本身就是一个原生p元素（也就是ShadowDOM的宿主元素），不需要在ShadowDOM里再嵌套一层p来做容器。

优化后的代码示例 #

JavaScript

class P_example extends HTMLParagraphElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.innerHTML = `
        <style>
        /* 使用:host伪类选中外部的宿主p元素 */
        :host {
            background-color: orangered;
            width: max-content;
            display: block; /* 确保样式符合块级元素特性 */
        }
        </style>
        <!-- 直接用slot渲染外部传入的内容，无需额外容器 -->
        <slot>Some default</slot>
    `;
  }
}
customElements.define("omer-p", P_example, { extends: "p" });

HTML

<p is="omer-p">Some sample text</p>

关键说明 #

• :host是ShadowDOM专属的伪类，专门用来选中ShadowDOM挂载的宿主元素（也就是这里的<p is="omer-p">），这样就能在ShadowDOM内部直接给原生p元素设置样式，完全不需要额外嵌套。
• 这种写法既保留了原生p元素的语义和默认行为，又通过ShadowDOM实现了样式隔离，同时更简洁高效。

内容的提问来源于stack exchange，提问作者Omer Meister