feat(stylesheets): Sheets now persist

README.md

@@ -32,11 +32,11 @@ class TestEl extends HTMLElement {
  constructor() {
  super();
  this.attachShadow({ mode: 'open' });
+ this.shadowRoot.adoptedStyleSheets = [everythingTomato];
  }
 
  connectedCallback() {
  this.shadowRoot.innerHTML = `<h1>This will be tomato colored, too</h1>`;
- this.shadowRoot.adoptedStyleSheets = [everythingTomato];
  }
 }
 

adoptedStyleSheets.js

@@ -1,18 +1,35 @@
 (function() {
  'use strict';
-
+ console.clear();
  const supportsAdoptedStyleSheets = 'adoptedStyleSheets' in document; 
  if (!supportsAdoptedStyleSheets) {
  const node = Symbol('constructible style sheets');
+ const constructed = Symbol('constructed');
+ const removalListener = Symbol('listener');
  const iframe = document.createElement('iframe');
+ const mutationCallback = mutations => {
+ mutations.forEach(mutation => {
+ const { removedNodes } = mutation;
+ removedNodes.forEach(removed => {
+ if (removed[constructed]) {
+ setTimeout(() => {
+ removed[constructed].appendChild(removed);
+ });
+ }
+ });
+ });
+ };
+ const observer = new MutationObserver(mutationCallback);
+ observer.observe(document.body, { childList: true });
  iframe.hidden = true;
  document.body.appendChild(iframe);
 
  const appendContent = (location, sheet) => {
  const clone = sheet[node]._sheet.cloneNode(true);
  location.body ? location = location.body : null;
- location.appendChild(clone);
+ clone[constructed] = location; 
  sheet[node]._adopters.push({ location, clone });
+ location.appendChild(clone);
  return clone;
  };
 
@@ -21,6 +38,19 @@
  adopter.clone.innerHTML = sheet[node]._sheet.innerHTML;
  });
  };
+
+ const onShadowRemoval = (root, observer) => event => {
+ const shadowRoot = event.target.shadowRoot;
+ if (shadowRoot && shadowRoot.adoptedStyleSheets.length) {
+ const adoptedStyleSheets = shadowRoot.adoptedStyleSheets;
+ adoptedStyleSheets
+ .map(sheet => sheet[node])
+ .map(sheet => {
+ sheet._adopters = sheet._adopters.filter(adopter => adopter.location !== shadowRoot);
+ });
+ }
+ observer.disconnect();
+ };
 
  class _StyleSheet {
  constructor() {
@@ -61,19 +91,28 @@
  return this._adopted || [];
  },
  set(sheets) {
+ const observer = new MutationObserver(mutationCallback);
+ observer.observe(this, { childList: true });
  if (!Array.isArray(sheets)) {
  throw new TypeError('Adopted style sheets must be an Array');
  }
  sheets.forEach(sheet => {
  if (!sheet instanceof CSSStyleSheet) {
- throw new TypeError('sdkfljdslfkj');
+ throw new TypeError('Adopted style sheets must be of type CSSStyleSheet');
  }
  });
  const uniqueSheets = [...new Set(sheets)];
  this._adopted = uniqueSheets;
- sheets.forEach(sheet => {
- appendContent(this, sheet);
- });
+
+ if (this.isConnected) {
+ sheets.forEach(sheet => {
+ appendContent(this, sheet);
+ });
+ }
+
+ const removalListener = onShadowRemoval(this, observer);
+ this[removalListener] = removalListener;
+ this.addEventListener('DOMNodeRemoved', removalListener, true);
  }
  };