From a4c553d8f1ff1c9a8b59bc0d7abd2e08e6d286b8 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Tue, 9 Apr 2024 21:02:28 -0400
Subject: [PATCH 1/4] CSSStylesheet DOM Shim

---
 src/dom-shim.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/dom-shim.js b/src/dom-shim.js
index ee621ea..8f3c044 100644
--- a/src/dom-shim.js
+++ b/src/dom-shim.js
@@ -1,5 +1,12 @@
 function noop() { }
 
+// https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet
+class CSSStyleSheet {
+  constructor() { }
+  replace() { }
+  replaceSync() { }
+}
+
 // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
 class EventTarget {
   constructor() {
@@ -146,4 +153,5 @@ class CustomElementsRegistry {
 globalThis.addEventListener = globalThis.addEventListener ?? noop;
 globalThis.document = globalThis.document ?? new Document();
 globalThis.customElements = globalThis.customElements ?? new CustomElementsRegistry();
-globalThis.HTMLElement = globalThis.HTMLElement ?? HTMLElement;
\ No newline at end of file
+globalThis.HTMLElement = globalThis.HTMLElement ?? HTMLElement;
+globalThis.CSSStyleSheet = globalThis.CSSStyleSheet ?? CSSStyleSheet;
\ No newline at end of file

From e3594ae2ea555c6e8b6413740782c2512e48fee9 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Fri, 12 Apr 2024 19:48:03 -0400
Subject: [PATCH 2/4] add test case for constructable stylesheets

---
 .../constructabe-stylesheet.spec.js           | 38 +++++++++++++++++++
 .../src/components/header/header.js           | 23 +++++++++++
 .../src/pages/index.js                        | 10 +++++
 .../import-attributes.spec.js                 |  6 +--
 4 files changed, 73 insertions(+), 4 deletions(-)
 create mode 100644 test/cases/constructable-stylesheet/constructabe-stylesheet.spec.js
 create mode 100644 test/cases/constructable-stylesheet/src/components/header/header.js
 create mode 100644 test/cases/constructable-stylesheet/src/pages/index.js

diff --git a/test/cases/constructable-stylesheet/constructabe-stylesheet.spec.js b/test/cases/constructable-stylesheet/constructabe-stylesheet.spec.js
new file mode 100644
index 0000000..fd433d9
--- /dev/null
+++ b/test/cases/constructable-stylesheet/constructabe-stylesheet.spec.js
@@ -0,0 +1,38 @@
+/*
+ * Use Case
+ * Run wcc against a custom element using constructible stylesheets.
+ *
+ * User Result
+ * Should return the expected HTML and no error instatiating a CSSStyleSheet..
+ *
+ * User Workspace
+ * src/
+ *   components/
+ *     header/
+ *       header.js
+ *   pages/
+ *     index.js
+ */
+import chai from 'chai';
+import { JSDOM } from 'jsdom';
+import { renderToString } from '../../../src/wcc.js';
+
+const expect = chai.expect;
+
+describe('Run WCC For ', function() {
+  const LABEL = 'Constructible Stylesheets usage';
+  let dom;
+
+  before(async function() {
+    const { html } = await renderToString(new URL('./src/pages/index.js', import.meta.url));
+
+    dom = new JSDOM(html);
+  });
+
+  describe(LABEL, function() {
+    it('should have one top level <wcc-header> element with a <template> with an open shadowroot', function() {
+      expect(dom.window.document.querySelectorAll('wcc-header template[shadowrootmode="open"]').length).to.equal(1);
+      expect(dom.window.document.querySelectorAll('template').length).to.equal(1);
+    });
+  });
+});
\ No newline at end of file
diff --git a/test/cases/constructable-stylesheet/src/components/header/header.js b/test/cases/constructable-stylesheet/src/components/header/header.js
new file mode 100644
index 0000000..24ad6fa
--- /dev/null
+++ b/test/cases/constructable-stylesheet/src/components/header/header.js
@@ -0,0 +1,23 @@
+const template = document.createElement('template');
+
+template.innerHTML = `
+  <header>
+    <h1>Welcome to my website!</h1>
+  </header>
+`;
+
+const sheet = new CSSStyleSheet();
+sheet.replaceSync('li{color:red;}');
+
+export default class Header extends HTMLElement {
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: 'open' });
+      this.shadowRoot.appendChild(template.content.cloneNode(true));
+    }
+
+    this.shadowRoot.adoptedStyleSheets = [sheet];
+  }
+}
+
+customElements.define('wcc-header', Header);
\ No newline at end of file
diff --git a/test/cases/constructable-stylesheet/src/pages/index.js b/test/cases/constructable-stylesheet/src/pages/index.js
new file mode 100644
index 0000000..e0f385d
--- /dev/null
+++ b/test/cases/constructable-stylesheet/src/pages/index.js
@@ -0,0 +1,10 @@
+import '../components/header/header.js';
+
+export default class HomePage extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <wcc-header></wcc-header>
+      <h1>Home Page</h1>
+    `;
+  }
+}
\ No newline at end of file
diff --git a/test/cases/import-attributes/import-attributes.spec.js b/test/cases/import-attributes/import-attributes.spec.js
index a5f9612..7dfdb26 100644
--- a/test/cases/import-attributes/import-attributes.spec.js
+++ b/test/cases/import-attributes/import-attributes.spec.js
@@ -31,10 +31,8 @@ describe('Run WCC For ', function() {
   });
 
   describe(LABEL, function() {
-    describe('static page content', function() {
-      it('should have the expected static content for the page', function() {
-        expect(dom.window.document.querySelector('h1').textContent).to.equal('Home Page');
-      });
+    it('should have the expected static content for the page', function() {
+      expect(dom.window.document.querySelector('h1').textContent).to.equal('Home Page');
     });
 
     it('should have a <header> tag within the document', function() {

From 4ca6cd873a373c63686e82c3c619de126130dd1d Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Fri, 12 Apr 2024 19:50:54 -0400
Subject: [PATCH 3/4] shim an empty adoptedStylesheets property

---
 src/dom-shim.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/dom-shim.js b/src/dom-shim.js
index 8f3c044..baa46d1 100644
--- a/src/dom-shim.js
+++ b/src/dom-shim.js
@@ -100,6 +100,7 @@ class ShadowRoot extends DocumentFragment {
   constructor(options) {
     super();
     this.mode = options.mode || 'closed';
+    this.adoptedStyleSheets = [];
   }
 }
 

From f2fddfb67fb55528d0a95842e2e318d348f7d322 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Fri, 12 Apr 2024 19:54:48 -0400
Subject: [PATCH 4/4] document CSSStyleSheet support in DOM shim

---
 docs/pages/index.md | 1 +
 src/dom-shim.js     | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/pages/index.md b/docs/pages/index.md
index 37350ed..fffc4cf 100644
--- a/docs/pages/index.md
+++ b/docs/pages/index.md
@@ -20,6 +20,7 @@ $ npm install wc-compiler --save-dev
     - `[get|set|has]Attribute`
 1. `<template>` / `DocumentFragment`
 1. `addEventListener` (as a no-op)
+1. Supports `CSSStyleSheet` (all methods act as no-ops)
 1. Recursive rendering of nested custom elements
 1. Metadata and runtime hints to support various progressive hydration and lazy loading strategies
 
diff --git a/src/dom-shim.js b/src/dom-shim.js
index baa46d1..be289a3 100644
--- a/src/dom-shim.js
+++ b/src/dom-shim.js
@@ -2,7 +2,8 @@ function noop() { }
 
 // https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet
 class CSSStyleSheet {
-  constructor() { }
+  insertRule() { }
+  deleteRule() { }
   replace() { }
   replaceSync() { }
 }