Есть ли способ отредактировать CSS / JS WebComponent?

Question

Я веб-разработчик и недавно начал работать с Ioni c 4, основанным на веб-компоненте. Я пытался отредактировать CSS компонентов, но я не смог отредактировать то же самое, и позже выяснил, что это из-за Web-компонентов, которые имеют # shadow- root.

Мой вопрос: есть ли способ отредактировать CSS и JS веб-компонента. Если нет, то почему это там?

Недостатки того же самого по моему мнению: - Невозможно применить пользовательский CSS в дочерних компонентах Компонента. - Плагины, такие как Stylus, будут бесполезны, так как CSS не будет применен, и мы не сможем получить темный режим.

Answer 1

Компонент Автор определяет уровень применения стиля.

нет #shadow-root

• Все глобальные CSS применены
• все дочерние элементы являются частью основного документа DOM

ShadowDOM, созданный с помощью this.attachShadow({mode:"open"})

• Глобальные CSS не применены
• CSS Свойства (если используются автором компонента) применяются
• Вы можете получить доступ к shadowRoot и перезаписать все, что находится внутри
  (это похоже на покупку стола IKEA и установку на него пилы)

shadowDOM, созданный с помощью this.attachShadow({mode:"closed"})

• Не применяется глобальное CSS применено
• CSS Свойства (если используются автором компонента) применяются
• Вы можете не получить доступ к shadowRoot

Документация

источник: https://developers.google.com/web/fundamentals/web-components/shadowdom

TL; DR

Shadow DOM устраняет хрупкость построения веб-приложений. Хрупкость происходит от глобальной природы HTML, CSS и JS. За эти годы мы изобрели непомерное количество инструментов , чтобы обойти проблемы. Например, когда вы используете новый HTML id / class, невозможно сказать, будет ли он конфликтовать с существующим именем, используемым страницей. Незаметные ошибки подкрадываются, CSS специфика становится огромной проблемой (! Важно все!), Селекторы стиля выходят из-под контроля, и производительность может пострадать . Список можно продолжить.

Shadow DOM исправляет CSS и DOM . Он вводит стили с областью действия для веб-платформы. Без инструментов или соглашений об именах вы можете связывать CSS с разметкой , скрывать детали реализации,
и автор автономные компоненты в ванили JavaScript.

Узнайте все о компонентах стайлинга:

• https://developers.google.com/web/fundamentals/web-components/shadowdom#styling

• (пока не стандарт) https://developers.google.com/web/updates/2019/02/constructable-stylesheets