Как убрать все стили с элемента и оставить только один класс?

Question

[Elvis]

Привет!
Пишу расширение для хрома, на сайт добавляю свои элементы, свою таблицу стилей.
К примеру есть обычный select. в файлах css автора сайта вешаются стили на все select сразу. я хочу изменить свой select под мои стили. создал класс, прописал правила, но мой стиль объединяется с стилем автора. можно использовать !important для каждого правила, но это тогда мне нужно переписать все правила что у автора и их заменить.
Есть ли способ указать элементу чтобы использовать только стиль из класса, игнорируя другие стили с других css?

Answer 1

[fallus]

Использовать shadow dom или вручную сбрасывать всё в своём элементе:

#MY_ELEMENT, #MY_ELEMENT *, #MY_ELEMENT *::before, #MY_ELEMENT *::after{
  all: unset
}

Лучше shadow dom, потому как он изолирован.

https://learn.javascript.ru/shadow-dom#inkapsulyatsiya

Comments

[Elvis]

а как мне прописать стили в этот shadow dom? как я понял это элемент в элементе и на нем стили. но вернемся к то му же примеру. у меня есть стандартный select, на него вешаются стили автора. мне внутри select нужно создать свой select с моими стилями? вот этот момент не понял я (

[Elvis]

Получилось через shadow dom
Я вставил вместо select - span. Потом создал shadow root в этом span через JS, добавил туда мой select и мой стиль в теге style.
И всё, стиль тот который мне нужен.
Спасибо, не знал про shadow dom до этого.