Вложенный CSS веб-компонента недействителен. ⇐ CSS

[Гость]

После моего тестирования эффективно писать CSS напрямую с использованием вложения, но в WebComponent это недопустимо после вложения с помощью селектора :host. Ниже приведен демонстрационный код. Номер версии My Chrome — 117.

index.html:

Документ :хозяин { ширина: 200 пикселей; высота: 50 пикселей; дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; вес шрифта: 700; цвет фона: #c00; & .контейнер { дисплей: гибкий; ширина: 100%; высота: 70%; цвет фона: #fcf; & .текст { цвет: #fff; } } } textContent index.js

импортировать TestCom из «/TestCom.js»; window.customElements.define("test-com", TestCom); const com_testCom = новый TestCom(); document.body.append(com_testCom); TestCom.js

класс TestCom расширяет HTMLElement { конструктор() { супер(); это.#init(); } #в этом() { constshadowRoot = this.attachShadow({режим: "открыть" }); const ele_templateTestCom = document.querySelector(".template_testCom"); const content = ele_templateTestCom.content.cloneNode(true); shadowRoot.appendChild(содержимое); } } экспортировать TestCom по умолчанию; введите здесь описание изображения

Ниже приведен тест: когда не-WebComponent использует вложенность CSS, стили внутри вложенности CSS используются нормально.

Документ .noWebComponent { ширина: 200 пикселей; высота: 50 пикселей; дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; вес шрифта: 700; цвет фона: #c00; & .контейнер { дисплей: гибкий; ширина: 100%; высота: 70%; цвет фона: #fcf; & .текст { цвет: #fff; } } } textContent введите здесь описание изображения