Расширение 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>

In myStyleManager Iзатем можно легко

• отключить / включить определения STYLE
• добавить / удалить правила
• и т. д.

Настраиваемые элементы Цель:

Заменить <STYLE> на <CARDTS-STYLE>, чтобы я мог инициировать в connectedCallback:

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

Это (конечно) не работает, потому что я могу только расширить HTMLElement

0 результатов поиска в StackOverflow для [пользовательский элемент] HTMLStyleElement

И остальная часть Интернета также не имеет указателей.

Вопросы:

1. Можно ли расширить STYLE?
2. Лучше ли оборачивать CARDTS-STYLE вокруг дочернего элемента STYLE?

Answer 1

Можно ли расширить STYLE?

Да

Лучше ли оборачивать CARDTS-STYLE вокруг дочернего элемента STYLE?

Я так не думаю, но это зависит от того, чего вы хотите достичь.

---

Если вы хотите управлять таблицей стилей, вы можете рассмотреть возможность использования новой функции под названием Constructable Stylesheets , который позволит загружать, определять и добавлять таблицы стилей CSS в документ HTML, а также в Shadow DOM.

В этом посте вы можете найти работающую иллюстрацию это уже работает с Chrome 73 и Opera 60.