使用自定义元素扩展 HTMLStyleElement v1

Question

多年来，我一直使用以下模式管理我的（许多）STYLE 元素：

[为简洁起见简化了代码]

    <STYLE id="theme1" onload="myStyleManager.init(this)">
       ...
    </STYLE>
    <STYLE id="theme2" onload="myStyleManager.init(this)">
       ...
    </STYLE>
    <STYLE id="devmode" onload="myStyleManager.init(this)">
       ...
    </STYLE>

在myStyleManager我就可以轻松

disable/enable 样式定义
add/delete 规则
等等

自定义元素 Objective:

将 <STYLE> 替换为 <CARDTS-STYLE> 这样我就可以在 connectedCallback:

中初始化

    class StyleElement extends HTMLStyleElement {
        constructor() {
            super();
        }
        connectedCallback() {
            myStyleManager.init(this);
        }
    }
    __defineElement('cardts-style', StyleElement);

这（当然）不起作用，因为我只能扩展 HTMLElement

0 个在 Whosebug 中搜索 [custom element] HTMLStyleElement

的结果

Web 的其余部分也没有任何指针。

问题：

是否可以扩展 STYLE？
将 CARDTS-STYLE 包裹在子元素 STYLE 周围是否更好？

Answer 1

Is it possible to extend STYLE?

是

Is it better to wrap CARDTS-STYLE around a child element STYLE?

我不这么认为，但这取决于你想要达到的目标。

如果您想管理样式表，您可以考虑对 HTML 文档和 Shadow DOM 使用名为 Constructable Stylesheets that will permit to load, define and add CSS stylesheets 的新功能。

您可以找到已经适用于 Chrome 73 和 Opera 60 的。

使用自定义元素扩展 HTMLStyleElement v1

Extending HTMLStyleElement with Custom Elements v1

stylesheet

web-component

custom-element