使用自定义元素v1扩展HTMLStyleElement

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，我可以轻松

• 禁用/启用STYLE定义
• 添加/删除规则
• 等等

自定义元素目标：

用<STYLE>替换<CARDTS-STYLE>所以我可以在connectedCallback中初始化：

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

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

0结果搜索[custom element] HTMLStyleElement的StackOverflow

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

问题：

1. 是否有可能扩展STYLE？
2. 围绕子元素STYLE包装CARDTS-STYLE会更好吗？

Answer 1

是否有可能扩展STYLE？

是

围绕子元素STYLE包装CARDTS-STYLE会更好吗？

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

---

如果你想管理样式表，你可以考虑使用一个名为Constructable Stylesheets的新功能，它允许load, define and add CSS stylesheets转换为HTML文档和Shadow DOMs。

您可以找到适用于Chrome 73和Opera 60的running illustration in this post。