使用自定义元素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>替换为<CARDTS-STYLE>，以便我可以在connectedCallback中进行初始化：

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

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

0个结果在StackOverflow中搜索[custom element] HTMLStyleElement

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

问题：

1. 是否可以扩展样式？
2. 将CARDTS-STYLE包裹在子元素STYLE上是否更好？

Answer 1

  

是否可以扩展样式？

是

  

将CARDTS-STYLE包裹在子元素STYLE上是否更好？

我不这么认为，但这取决于您想要实现的目标。

---

如果您要管理样式表，则可以考虑使用名为Constructable Stylesheets的新功能，该功能将允许load, define and add CSS stylesheets使用HTML文档以及Shadow DOM。

您会找到running illustration in this post，已经可以在Chrome 73和Opera 60中使用。