feat: add support for serializable option in shadow DOM

Author: fusionstrings

src/index.d.ts

@@ -8,6 +8,7 @@ type Options =
 			shadow: true;
 			mode?: 'open' | 'closed';
 			adoptedStyleSheets?: CSSStyleSheet[];
+			serializable?: boolean;
 	  };
 
 /**

src/index.js

@@ -15,7 +15,11 @@ export default function register(Component, tagName, propNames, options) {
 		inst._vdomComponent = Component;
 
 		if (options && options.shadow) {
-			inst._root = inst.attachShadow({ mode: options.mode || 'open' });
+			const shadowOptions = { mode: options.mode || 'open' };
+			if (options.serializable !== undefined) {
+				shadowOptions.serializable = !!options.serializable;
+			}
+			inst._root = inst.attachShadow(shadowOptions);
 
 			if (options.adoptedStyleSheets) {
 				inst._root.adoptedStyleSheets = options.adoptedStyleSheets;

test/index.test.jsx

@@ -421,4 +421,20 @@ describe('web components', () => {
 			'<h1>Light DOM Children</h1><div><slot><p>Child 1</p><p>Child 2</p></slot></div>'
 		);
 	});
+
+	it('supports the `serializable` option', async () => {
+		function SerializableComponent() {
+			return <div className="serializable-child">Serializable Shadow DOM</div>;
+		}
+
+		registerElement(SerializableComponent, 'x-serializable', [], {
+			shadow: true,
+			serializable: true,
+		});
+
+		root.innerHTML = `<x-serializable></x-serializable>`;
+
+		const el = document.querySelector('x-serializable');
+		assert.isTrue(el.shadowRoot.serializable);
+	});
 });