это и в моем мире проблема
расскажу историю последнюю

есть у нас demo/index.html - файлик где демки компонента лежат, это как бы часть документации
так вот там типично есть глобальный стиль .container { margin: 0 auto; }... ну я упрощаю, но смысл в том, что такое селектор определен в файле без всяких компонентов и ShadowDOM

в итоге часть браузеров, работающих через полифилл, очевидно подпадают под его действие
и у меня как раз был компонент на той страничке импортирован и использован, в котором внутрях тоже был class="container"

мораль сей басни такова: ни один глобальный стиль не имеет права на существование, даже в таком узком юз кейсе, как демо страница, потому что иначе рано изи поздно ,скорее рано, точно где-нибудь зафакапите и заметите постфактум

ну а твою проблему можно решить множеством способов, каждый из них так или иначе будет юзать
- либо инлайн стили
- либо на уровне сборки добавлять уникальные префиксы (ну допустим хеш) к названиям классов, как в стилях, так и в html

и совет выше про глобальные стили так же актуален
у нас официально в проекте глобально только font-face определены и стили для body, все (ну вот эти demo-страницы не в счет, там каждый как хочет так и дрочит, и пора с этим завязывать тоже)

Ну, использовать методику, исключающую протечки стилей, -- не проблема.

Меня другое интересует: когда твой компонент включают в проект с грязным CSS, и компонент выглядит криво.

если в грязных стилях есть селекторы с тегами, то шансов ноль без ShadowDOM

можно попробовать прогнать эти грязные стили через сборку тоже и тоже добавить уникальные классы к ним, а в HTML тоже провернгуть такую операцию

Как от этого защититься?

мне кажется никак кроме ShadowDOM
решения лежат только на уровне методологий

и даже ShadowDOM не панацея в этом смысле
туда местами протекают разные штуки
сходу не скажу что именно, сам пытаюсь выработать понимание этого, но навскидку приходит частный пример с text-decoration: underline, который протекает согласно спеке, подчеркивая контент внутри ShadowDOM

font-face очевидно тоже глобально на странице регистрируется, хотя ни разу не пробовал сделать это внутри style в ShadowDOM, думаю оно протечет наружу

> частный пример с text-decoration: underline, который протекает согласно спеке, подчеркивая контент внутри ShadowDOM

Фак мой мозг 🙈

ну ладно ладно, не все так плохо
пока на такие wtf я больше не натыкался
ну скажем свойства, которые обычно наследуются, типа размеров, цветов и прочего, конечно же не протекают
не очень понятно почему для text-decoration сделано исключение

а кстати) вот тебе еще одно древнее решение твоей проблемы - заверни свои компоненты в iframe 😈

> не очень понятно почему для text-decoration сделано исключение

Прям в спеке прописано?

😭

Застрелись и то банальнее бы прозвучало.

Даже любопытно стало, как будет вести себя SPA, у которого каждый элемент -- iframe. 😬

Делал уже :) небольшое приложение но всеже. Прикольно работает. Но так как нет iframe[seamless] то ресайз приходится синхронизировать через Js. От чего виднф лаги. Но в целом производительность ок

🙊

А Ишак как живет?

Это мне? Про iframes madness?

Угу

зацените раздел про closed shadowRoot mode
https://developers.google.com/web/fundamentals/web-components/shadowdom#closed