что бы внешние стили body не влияли на веб компонент ? И еще вопрос, только стили html/body могут повлиять на веб компонент, в плане перебить какие то стили ?
А где такое вообще возможно?)
Из коробки — нет. Для этого нужно втаскивать ЦСС-модули в свелт. Способы для этого есть. Кирилл, не подскажешь? Я ссылку не могу найти на этот кайфовый препроцессор.
Везде. По сути, проблема в том, что когда ты в свелте пишешь class='modal', то он оставляет этот класс всегда. Если ты вдобавок в компоненте же в теге style пишешь какие-то стили к этому селектору, тогда свелт хеширует и делает class='modal svelte-hasdasd'. То есть изоляция стилей компонента есть, но извне они протекают. Мне это норм, я пользуюсь глобальными стилями (бульма). Но не всем.
Стоп стоп стоп, вопрос был про каскадность.
понял, спасибо ) Если найдете ссылку буду очень благодарен )
А, вот с скриншотом я понял, да. Нет, от такого не защититься, разумеется.
Не, это нерешаемо. Только ресет в веб-компоненте делать, хаха
Такое просто нужно контролировать. При правильной архитектуре это возможно. А css-modules это один из инструментов, не самый лучший, но для большинства хоть что-то…
да, я тоже думал о ресете ) но это же только для body и html требуется сделать как я понял ? Другими вариантам я стили перебить не смог, хоть это порадовало
Не очень понятная задача. Вы делаете какой-то встраиваемый виджет, поэтому вы не контролируете стили на бади?
Вы задаете свойства, которые наследуются детьми от родителей. Вы никак не сможете этого избежать. Вам нужно научиться это контролировать и задавать правильные значения в нужных местах.
Да, так и есть. Клинты буду встраивать грубо говоря наш виджет себе на сайт. Вот и требуется что бы их стили не перебивали стили нашего виджета. Надеялся что со svelte не придется пихать все во фрейм.
svelte-preprocess-cssmodules https://github.com/sveltejs/rfcs/pull/13#issuecomment-823835345 Он уже вышел из rc, можно ставить без next
Я вижу тут два варианта: 1. держать свой UI в iframe 2. попробовать поиграться с all: unset или all: initial
Да, тоже думаю что в итоге придется пихать UI в iframe все таки
Вообщем обернул в компоненте все в общий див, задал ему all: initial и вродь сработало даже ) Фиг знает какие конечно тут подводные камни будут )
что в этом варианте? у компонента просто задан недефолтный бэкграунд? потому что дефолтный прозрачный. здесь не про компоненты и не про изоляцию. хоть в модулях, хоть свелте и хоть в шедоу доме пришлось бы в компоненте сделать непрозрачный бэк
Тут есть подводные камни, конечно, потому что тут всё еще работает каскад и стилизация извне :) Условно, * {color: white !important;} перебьёт этот ресет. Если добавишь !important в своём ресете, всё равно извне можно будет стилизовать более специфичными селекторами. Короче, реальная изоляция только в iframe.
Я потестил с * {color: white !important;}, не перебивает ) на main стоит all: initial; и это помогает
Обсуждают сегодня