Переопределение стилей в элементе shadow-root

есть ли способ изменить стили, найденные в элементе shadow? В частности, расширить / перезаписать некоторые свойства, найденные в css класс? Я использую расширение chrome под названием Beanote который не обновлялся с апреля (2017), и есть досадная ошибка, которую я хотел бы исправить. Я обнаружил, что одна строка css исправляет его достаточно для меня, но я в недоумении при применении его, не заходя внутрь самого элемента shadow и непосредственно редактируя эти стили в инструментах разработки.

Я ищу способ для этого:

/*global css rule*/
.the-class-name { property-name: my-value; }

переписать следующим образом:

/* style tag inside the shadow-root */
.the-class-name { property-name: bad-value; }


Большинство ресурсов, которые я нашел в интернете с запросами с участием shadow-root override style или edit shadow-root styling имеет какое-то отношение к :host который, если он предназначен для этого, не работает для моих нужд или устаревших функций, таких как ::shadow.

6
css shadow-dom

1 ответов

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

это может быть возможно с переменными CSS, но они должны быть реализованы явно в затененном компоненте (что не относится к этой сторонней библиотеке).

обходной путь заключается в том, чтобы напрямую ввести линию стиля в shadow DOM.

//host is the element that holds the shadow root:
var style = document.createElement( 'style' )
style.innerHTML = '.the-class-name { property-name: my-value; }'
host.shadowRoot.appendChild( style )

NB: он будет работать, только если тень DOM mode установлено значение 'open'.

2