1.7 KiB

Raw Permalink Blame History

Pull-Styles

A simple proof-of-concept implementation of a mechanism to pull outside styles into a Shadow-DOM.

<style>
	p { color: red }
</style>

<my-component>
	<template shadowrootmode="open">
		<adopt-styles adopt="all"></adopt-styles>
		<p>This paragraph is red</p>
	</template>
</my-component>

Rationale

This is primarily meant as a simple proof-of-concept to show how this mechanism could work as a solution to the use-case of authors wanting to let outside styling rules affect content inside a shadow DOM.

The aim of this project is not to provide a full solution to the problem, but to showcase how one possible solution could work and to allow playing around with the concept in real-world projects.

Usage

Putting the <adopt-styles> node inside a shadow root will search the document for style sheets and adopt them into the shadow root. Changes in the document's head that appear related to styles will trigger an update of the adopted styles.

Adding the layer= attribute to the <adopt-styles> node will wrap the adopted rules in a layer of the given name.

(Not yet Implemented) Setting the adopt= attribute to a value other than "all" will only adopt styles from the CSS layer of the given name.

Notes

Due to this being a relatively "simple" javascript implementation, outside selectors will simply be mirrored into the shadow DOM, but more complex selectors like child selectors won't match elements across shadow DOM boundaries.

Planned Features:

Import <link> tags
Import <style> tags
Import into layer
Automatic updating
Import from layer