Как применить глобальный CSS к веб-компонентам через shadow-dom

Я работаю над проектом световых элементов, и у меня возникла проблема, reset.css не может быть применена к веб-компонентам, заключенным в shadow-root

Я пробовал этот способ, и у меня возникла следующая ошибка.

Refused to apply style from 'http://localhost:8080/style/static/reset.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Код, который я пробовал, таков:

<script>
  var css = new CSSStyleSheet()
  css.replace('@import url("./style/static/reset.css")')
  document.adoptedStyleSheets = [css]
</script>

это помещается в файл HTML.

Как я могу избежать этой ошибки и применить reset.css к веб-компонентам?


web-component polymer lit-element lit-html shadow-dom
person Moro    schedule 02.08.2019    source источник
comment
На самом деле это должно работать. Ошибка возникла откуда-то еще (возможно, ваш веб-сервер устанавливает неправильный тип MIME)   -  person Supersharp    schedule 04.08.2019

Ответы (1)


arrow_upward
2
arrow_downward

Поможет ли применить замену импорта к теневому корню, а не к документу?

const node = document.createElement('div')
const shadow = node.attachShadow({ mode: 'open' })
shadow.adoptedStyleSheets = [sheet]

https://wicg.github.io/construct-stylesheets/#using-constructed-stylesheets

Редактировать - добавление для ясности:

Вышеупомянутые адреса применяют таблицу стилей, возможно, содержащую операторы @import, к кадру, к которому относится ваш исходный вопрос, однако, поскольку ваш код пытается применить созданный лист к документу, для меня, вопрос становится немного туманным.

Указанная ошибка указывает на код, который пытается применить таблицу стилей, созданную в другом документе:

Если вы попытаетесь использовать CSSStyleSheet, созданный в другом документе, будет выброшено исключение DOMException NotAllowedError.

https://github.com/WICG/construct-stylesheets/blob/gh-pages/explainer.md

person Tim Pozza    schedule 02.08.2019