Внешний стиль для CustomElements V1 и ShadowDOM

Хотя это может показаться повторяющимся вопросом, вопросы, заданные ранее, были основаны на Polymer, а не на нативных CustomElements, и речь идет о самом css, а не о проникновении в ShadowDOM или пользовательские свойства/переменные CSS

Итак, у нас есть простой пользовательский элемент (примечание: на момент написания он работает только в более новых версиях Chrome).

class StyleMe extends HTMLElement {
	constructor () {
		super();
		let shadow = this.attachShadow({ mode: 'closed' });
		shadow.appendChild(document.querySelector('#style-me').content.cloneNode(true));
	}
}
customElements.define('style-me', StyleMe);
h1 {
	/* even !important doesn't penetrate */
	color: red !important;
}
<h1>I'm a normal heading</h1>
<style-me>I'm heading hidden in style-me's shadow</style-me>
<template id="style-me">
	<style>
		:host {
			background: blue;
			display: block;
		}
		h1 {
			color: yellow;
		}
	</style>
	<h1><slot></slot></h1>
</template>

Это прекрасно демонстрирует, как стили изолированы при использовании ShadowDOM.

Что было бы неплохо сделать, так это сохранить содержимое <style> внутри <template> во внешнем файле, возможно, сгенерированном препроцессором, например less.

После долгих поисков только для того, чтобы найти ответы, связанные с полимером, я ничего не понял, есть какие-нибудь мысли?

Я не ищу настраиваемые свойства, которые они позволили бы мне использовать.

<style>
    :host {
        background: blue;
        display: block;
    }
    h1 {
        color: var(--something);
    }
</style>

И установите цвет с помощью

style-me {
    --something: yellow;
}

Мой вопрос о переезде

:host {
    background: blue;
    display: block;
}
h1 {
    color: yellow;
}

Из тега <style> в отдельный файл


javascript html css custom-element html5-template
person Zander Brown    schedule 28.08.2017    source источник
comment
Тот же ответ, что и для полимера, используйте переменные css. Они являются частью спецификации, поставляются как минимум в 3 браузерах. Они не уникальны для полимера.   -  person Jared Smith    schedule 28.08.2017
comment
Возможный дубликат Как стилизовать внутренние элементы пользовательского полимерного элемента с использованием внешних стилей?   -  person Jared Smith    schedule 28.08.2017
comment
Свойства CSS на самом деле не то, что мне нужно, и, как уже упоминалось, я не использую Polymer.   -  person Zander Brown    schedule 28.08.2017
comment
Переменные CSS не являются частью спецификации пользовательских элементов.   -  person Supersharp    schedule 28.08.2017

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете использовать директиву CSS @import url.

<template id="style-me">
    <style>
        @import url( '/css/style.css' )
    </script>
    <h1><slot></slot></h1>
</template>

Вопрос был обсуждался здесь.

person Supersharp    schedule 28.08.2017
comment
Спасибо, это то, что я искал - person Zander Brown; 28.08.2017

arrow_upward
1
arrow_downward

Я понимаю, что этому вопросу уже больше года, но вы можете начать изучать спецификацию конструируемой таблицы стилей. /предложение.

Это позволит вам сделать что-то вроде:

const customStyleSheet = new CSSStyleSheet();
await customStyleSheet.replace("@import url('/css/style.css')");
shadowDOMReference.adoptedStyleSheets = [ customStyleSheet ];
person Caleb Williams    schedule 17.12.2018