Легкий стиль DOM спускается вниз к теневому DOM

Я создал пользовательский элемент из полимера. Когда элемент включен в h2, он наследует boldness и font-size h2. Мне нужно, чтобы мои компоненты были защищены от внешнего мира и не подвергались влиянию стилей легких домов. Как я могу добиться этого, если свет DOM падает каскадом вниз?

Чтобы быть более конкретным, проверьте следующее: введите здесь описание изображения


css web-component polymer shadow-dom
person dipole_moment    schedule 10.05.2015    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Похоже, это заложено:

Элементы верхнего уровня теневого дерева наследуются от своего основного элемента.

Ведущим элементом в данном случае является h2.

Вам нужно будет включить явные объявления размера и веса в CSS вашего пользовательского элемента, чтобы предотвратить наследование стилей от основного элемента.

person BoltClock    schedule 10.05.2015
comment
Я вижу здесь проблему, но она немного сбивает с толку, и позвольте мне объяснить, почему: в моем пользовательском элементе :host в таблице стилей относится к x-component, а не к h2. Когда я стилизую свой :host, эти стили применяются к x-component. Еще одна проблема заключается в том, что у меня есть расширение Chrome, которое динамически изменяет DOM, и мне нужно, чтобы стиль оставался согласованным. Я думаю о включении сценария сброса в свои компоненты. о чем ты думаешь? благодарю вас. - person dipole_moment; 10.05.2015

arrow_upward
0
arrow_downward

Вы можете сбросить свой CSS на значения по умолчанию браузера, используя all: initial; в :host

:host {
    all: initial;
}

Не поддерживается в IE или Edge, но и не является теневым DOM.

Другой вариант — использовать сброс CSS в веб-компоненте, например normalize.css.

По-видимому, в браузере есть оптимизация для обработки одинакового CSS в нескольких веб-компонентах, поэтому это не так неэффективно, как кажется.

person Craig    schedule 20.11.2019