web-component - 如何为 HTMLElement 的任何实例定义影子 DOM？

Question

比如我希望所有<p>的s都受到影响；无需更改标签名称，也无需添加is="". 那可能吗？我试过了：

customElements.define('p', MyParagraph, { extends: 'p' }); // or
customElements.define('p', MyParagraph);
// "p" is not a valid custom element name

然后我也尝试重新定义HTMLParagraphElement：

class HTMLParagraphElement extends window.HTMLParagraphElement{}

但是这两种解决方案都不起作用。

我不想将影子 DOM 单独添加到所有<p>s；我想将它<p>自动添加到任何将要创建的东西中，而无需观察新元素。如果那有意义的话; 我知道这是一个坏主意，但我现在大多只是好奇。

先感谢您。

编辑：也试过

class HTMLParagraphElement extends window.HTMLParagraphElement {
    connectedCallback() {
        super.connectedCallback();
        // ...
    }
}

标签： web-componentshadow-dom