2017-02-20 22 views
1

Я экспериментировал с <fancy-tabs> теневым например йотом Eric Bidelman в: https://developers.google.com/web/fundamentals/getting-started/primers/shadowdomНевозможно добавить :: после псевдо-элемента щелевого элемента в теневом йоте

И пытается добавить материал Дизайн стиля к нему, что потребует добавив: после псевдоэлемента на вкладки.

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

Polymer примера: https://jsbin.com/maqaze/edit?html,output

Vanilla JS пример :

В этом втором примере применение псевдоэлемента: после псевдоэлемента не работает в тени dom <style>, по-видимому, его необходимо установить извне.

https://jsbin.com/toxalu/edit?html,output

Так что мой вопрос, как вы должны идти о добавлении псевдо элемент в щелевом/свете йота элемент, без необходимости использовать внешние стили?

(попробовали эти примеры на Chrome и Safari)

+0

Основная точка теневого DOM - это отделить стили CSS от _outside_. Делая то, что вы просите, вы на самом деле были бы контрпродуктивными. Если у вас есть элементы light-DOM внутри тени DOM, вы должны стилизовать их за пределами DOM теней. – alesc

+0

Спектр позволяет изменять стиль для «распределенных» узлов (т. Е. Пользовательский свет, который помещен в теневое дерево элемента) https://developers.google.com/web/fundamentals/getting-started/primers/ shadowdom # stylinglightdom Вопрос, который я задаю, заключается в том, позволяет ли он также изменять свойства псевдоэлементов CSS: after и: before. Возможно, это считается «добавлением ящиков» в светлое царство и, как таковое, запрещено. Меня бросил тот факт, что он работает в приведенном выше примере Полимера, но, возможно, это проблема с самой реализацией? – evaneus

ответ

1

Если это похоже на работу в Polymer это связано с тем, что полимер 1,0 на самом деле не использовать нативные ::slotted псевдо-элементов.

Фактически полимер использует родной Shadow DOM "v0" и converts ::slotted to ::content. Вы можете увидеть его в Dev Tools.

Как вы уже отметили, вы можете добавить псевдоэлементы ::after извне.

Я полагаю, что псевдоэлементы считаются сложными селекторами и поэтому не поддерживаются в пределах ::slotted().

+0

Спасибо. Я заметил конверсии ':: content' и' :: slotted' и задавался вопросом, что происходит! – evaneus

+0

@evaneus вы можете возвысить, если это помогло :-) – Supersharp