add adoptedStyleSheets to the options (#95)

* add adoptefStyleSheets to the options

* test: Add simple test case

* refactor: Add types & format code

* docs: Add ReadMe example

---------

Co-authored-by: Ryan Christian <rchristian@ryanchristian.dev>

Author: rhildred

README.md

@@ -14,9 +14,9 @@ const Greeting = ({ name = 'World' }) => (
   <p>Hello, {name}!</p>
 );
 
-register(Greeting, 'x-greeting', ['name'], { shadow: true, mode: 'open' });
-//          ^            ^           ^             ^               ^
-//          |      HTML tag name     |       use shadow-dom        |
+register(Greeting, 'x-greeting', ['name'], { shadow: true, mode: 'open', adoptedStyleSheets: [] });
+//          ^            ^           ^             ^               ^            ^
+//          |      HTML tag name     |       use shadow-dom        |    use adoptedStyleSheets
 //   Component definition      Observed attributes     Encapsulation mode for the shadow DOM tree
 ```
 

src/index.js

@@ -2,7 +2,7 @@ import { h, cloneElement, render, hydrate } from 'preact';
 
 /**
  * @typedef {import('preact').FunctionComponent<any> | import('preact').ComponentClass<any> | import('preact').FunctionalComponent<any> } ComponentDefinition
- * @typedef {{ shadow: false } | { shadow: true, mode?: 'open' | 'closed' }} Options
+ * @typedef {{ shadow: false } | { shadow: true, mode?: 'open' | 'closed', adoptedStyleSheets?: CSSStyleSheet[] }} Options
  * @typedef {HTMLElement & { _root: ShadowRoot | HTMLElement, _vdomComponent: ComponentDefinition, _vdom: ReturnType<typeof import("preact").h> | null }} PreactCustomElement
  */
 
@@ -47,6 +47,11 @@ export default function register(Component, tagName, propNames, options) {
 			options && options.shadow
 				? inst.attachShadow({ mode: options.mode || 'open' })
 				: inst;
+
+		if (options && options.adoptedStyleSheets) {
+			inst._root.adoptedStyleSheets = options.adoptedStyleSheets;
+		}
+
 		return inst;
 	}
 	PreactElement.prototype = Object.create(HTMLElement.prototype);

src/index.test.jsx

@@ -309,4 +309,28 @@ describe('web components', () => {
 		assert.equal(myForm.elements[0].tagName, 'X-FORM-ASSOCIATED-CLASS');
 		assert.equal(myForm.elements[2].tagName, 'X-FORM-ASSOCIATED-FUNCTION');
 	});
+
+	it('supports the `adoptedStyleSheets` option', async () => {
+		function AdoptedStyleSheets() {
+			return <div className="styled-child">Adopted Style Sheets</div>;
+		}
+
+		const sheet = new CSSStyleSheet();
+		sheet.replaceSync('.styled-child { color: red; }');
+
+		registerElement(AdoptedStyleSheets, 'x-adopted-style-sheets', [], {
+			shadow: true,
+			adoptedStyleSheets: [sheet],
+		});
+
+		root.innerHTML = `<x-adopted-style-sheets></x-adopted-style-sheets>`;
+
+		const child = document
+			.querySelector('x-adopted-style-sheets')
+			.shadowRoot
+			.querySelector('.styled-child');
+
+		const style = getComputedStyle(child);
+		assert.equal(style.color, 'rgb(255, 0, 0)');
+	});
 });