Support Declarative Shadow DOM

src/morphdom.js

@@ -27,7 +27,11 @@ export default function morphdomFactory(morphAttrs) {
       if (fromNode.nodeName === '#document' || fromNode.nodeName === 'HTML' || fromNode.nodeName === 'BODY') {
         var toNodeHtml = toNode;
         toNode = doc.createElement('html');
-        toNode.innerHTML = toNodeHtml;
+        if (toNode.setHTMLUnsafe) {
+          toNode.setHTMLUnsafe(toNodeHtml);
+        } else {
+          toNode.innerHTML = toNodeHtml;
+        }
       } else {
         toNode = toElement(toNode);
       }

src/util.js

@@ -7,7 +7,11 @@ var HAS_RANGE_SUPPORT = !!doc && doc.createRange && 'createContextualFragment' i
 
 function createFragmentFromTemplate(str) {
     var template = doc.createElement('template');
-    template.innerHTML = str;
+    if (template.setHTMLUnsafe) {
+        template.setHTMLUnsafe(str);
+    } else {
+        template.innerHTML = str;
+    }
     return template.content.childNodes[0];
 }
 
@@ -23,7 +27,11 @@ function createFragmentFromRange(str) {
 
 function createFragmentFromWrap(str) {
     var fragment = doc.createElement('body');
-    fragment.innerHTML = str;
+    if (fragment.setHTMLUnsafe) {
+        fragment.setHTMLUnsafe(str);
+    } else {
+        fragment.innerHTML = str;
+    }
     return fragment.childNodes[0];
 }
 

test/browser/test.js

@@ -1677,4 +1677,34 @@ describe('morphdom' , function() {
 
          expect(div1).to.equal(div1_2);
      });
+
+    it('should handle declarative shadow dom', function() {
+        // Initial state: simple div with some content
+        const el1 = document.createElement('div');
+        el1.innerHTML = '<p>Before</p>';
+
+        // Target HTML includes declarative shadow DOM
+        const newHTML = `
+        <div>
+            <custom-element>
+                <template shadowrootmode="open">
+                  <span>Inside Shadow</span>
+                </template>
+            </custom-element>
+        </div>`;
+
+        // Perform the morph
+        morphdom(el1, newHTML);
+
+        // The shadow root should now exist
+        const shadowRoot = el1.firstElementChild.shadowRoot;
+        expect(shadowRoot === null).to.equal(false);
+        expect(shadowRoot.mode).to.equal('open');
+
+        // The shadow DOM should contain the expected content
+        expect(shadowRoot.innerHTML.trim()).to.equal('<span>Inside Shadow</span>');
+
+        // The light DOM should have no children (template was processed and removed)
+        expect(el1.firstElementChild.children.length).to.equal(0);
+    });
 });