diff --git a/AdoptStyles.js b/AdoptStyles.js
index 2dc88d0..16d8771 100644
--- a/AdoptStyles.js
+++ b/AdoptStyles.js
@@ -1,3 +1,35 @@
+class StylesEvent extends Event {
+ constructor() {
+ super("styles", { bubbles: true })
+ }
+}
+
+const styleSelector = `style, link[rel="stylesheet"]`
+
+/** @param {Element} node */
+const isStyleNode = node => node.matches(styleSelector) || node.querySelector(styleSelector)
+
+/** @param {MutationRecord} mutation */
+const isStyleMutation = mutation =>
+ (mutation.target instanceof Element) && isStyleNode(mutation.target)
+ || (mutation.target instanceof Text) && isStyleNode(mutation.target.parentElement)
+ || [...mutation.removedNodes].find(isStyleNode)
+
+const StylesObserver = new MutationObserver(mutations => {
+ [...mutations].forEach(console.log)
+ for (const {target} of [...mutations].filter(isStyleMutation)) {
+ target.dispatchEvent(new StylesEvent())
+ }
+})
+
+StylesObserver.observe(document.head, {
+ subtree: true,
+ characterData: true,
+ childList: true,
+ attributes: true,
+ attributeFilter: ["rel", "href"],
+})
+
/**
* @param {string} href
* @param {string} layer
@@ -58,18 +90,18 @@ function collectStyles(sheet, target) {
}
}
-export default class PullStyles extends HTMLElement {
+export default class AdoptStyles extends HTMLElement {
static observedAttributes = ["adopt", "layer"]
attributeChangedCallback() {
- this.pullStyles()
+ this.adoptStyles()
}
/**
* @param {string} adopt What to adopt
* @param {string|undefined} layer What CSS layer to wrap the external styles in
*/
- pullStyles(adopt=this.adopt, layer=this.layer) {
+ adoptStyles(adopt=this.adopt, layer=this.layer) {
if (adopt == "all") {
this.replaceChildren(document.createElement("style"))
const rules = new RuleCollection(layer)
@@ -86,4 +118,15 @@ export default class PullStyles extends HTMLElement {
get sheet() { return this.querySelector("style") }
get adopt() { return this.getAttribute("adopt") }
get layer() { return this.getAttribute("layer") }
+
+ connectedCallback() {
+ this.abortController = new AbortController()
+ document.addEventListener("styles", () => {
+ this.adoptStyles()
+ })
+ }
+
+ disconnectedCallback() {
+ this.abortController.abort()
+ }
}
diff --git a/index.html b/index.html
index 3e42312..7562d0f 100644
--- a/index.html
+++ b/index.html
@@ -16,6 +16,7 @@
Inline
+ Layer
Linked
diff --git a/readme.md b/readme.md
index cca572b..a7e827b 100644
--- a/readme.md
+++ b/readme.md
@@ -9,3 +9,4 @@ into a Shadow-DOM.
- [x] Import `