nexpr · October 29, 2023 07:05
diff --git a/readme.md b/readme.md
diff --git a/document-only-style.css b/document-only-style.css
 foo-bar {
 	display: block;
 	margin: 10px;
 }

 /* not applied */
 .box {
 	color: red;
 }
diff --git a/example.html b/example.html
 <!DOCTYPE html>

 <script type="module">
 	import document_only_sheet from "./document-only-style.css" assert { type: "css" }
 	import global_style from "./global-style.css" assert { type: "css" }
 	import { globalStyle } from "./global-style.js"

 	global_style.global_style = true
 	document.adoptedStyleSheets.push(document_only_sheet, global_style)

 	const selector = (sheets) => {
 		return sheets.filter(x => x.global_style)
 	}

 	customElements.define("foo-bar", class extends globalStyle(HTMLElement, selector) {
 		constructor() {
 			super()
 			this.shadowRoot.innerHTML = `
 				<div class="box">
 					text
 				</div>
 			`
 		}
 	})
 </script>

 <foo-bar></foo-bar>
diff --git a/global-style.css b/global-style.css
 .box {
 	border: 3px solid green;
 	padding: 10px;
 }
diff --git a/global-style.js b/global-style.js
 export const globalStyle = (Base, selector) => {
 	return class extends Base {
 		constructor() {
 			super()
 			const sheets = selector([...this.ownerDocument.adoptedStyleSheets])
 			const root = this.attachShadow({ mode: "open" })
 			root.adoptedStyleSheets.push(...sheets)
 		}
 	}
 }
	<!DOCTYPE html>

	<script type="module">
	import document_only_sheet from "./document-only-style.css" assert { type: "css" }
	import global_style from "./global-style.css" assert { type: "css" }
	import { globalStyle } from "./global-style.js"

	global_style.global_style = true
	document.adoptedStyleSheets.push(document_only_sheet, global_style)

	const selector = (sheets) => {
	return sheets.filter(x => x.global_style)
	}

	customElements.define("foo-bar", class extends globalStyle(HTMLElement, selector) {
	constructor() {
	super()
	this.shadowRoot.innerHTML = `
	<div class="box">
	text
	</div>
	`
	}
	})
	</script>

	<foo-bar></foo-bar>
	export const globalStyle = (Base, selector) => {
	return class extends Base {
	constructor() {
	super()
	const sheets = selector([...this.ownerDocument.adoptedStyleSheets])
	const root = this.attachShadow({ mode: "open" })
	root.adoptedStyleSheets.push(...sheets)
	}
	}
	}