From c8624c9d22f0f2bdbe5459e03a5287d163498375 Mon Sep 17 00:00:00 2001
From: kj <kj@begin.com>
Date: Thu, 5 Oct 2023 16:18:24 -0700
Subject: [PATCH] Update allows for morphing of shadowRoot as well

---
 index.mjs         |  5 ++++-
 package-lock.json | 35 +++++++++++++++++++++++++++++++++++
 package.json      |  1 +
 test/mm-test.html | 36 +++++++++++++++++++++++++++++++++++-
 4 files changed, 75 insertions(+), 2 deletions(-)

diff --git a/index.mjs b/index.mjs
index bd8a152..b9eb47a 100644
--- a/index.mjs
+++ b/index.mjs
@@ -19,8 +19,11 @@ const MorphdomMixin = (superclass) => class extends superclass {
     })
     const updated = document.createElement('div')
     updated.innerHTML = tmp.trim()
+    const root = this.shadowRoot
+      ? this.shadowRoot
+      : this
     morphdom(
-      this,
+      root,
       updated,
       {
         childrenOnly: true
diff --git a/package-lock.json b/package-lock.json
index 00c18cc..d25aabc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
       },
       "devDependencies": {
         "@enhance/custom-element": "^1.0.2",
+        "@enhance/shadow-element": "^1.0.3",
         "@enhance/store": "^1.0.1",
         "@esm-bundle/chai": "^4.3.4-fix.0",
         "@rollup/plugin-node-resolve": "^15.2.2",
@@ -104,6 +105,23 @@
       "integrity": "sha512-bBGdt47zOJ+eWD8/fK4E4IjyonvjSKRcNBM07gUXbkgPbMPdIoJYlae8IQGHC2aiI+frdFjlQCE5d2wiQA2a0w==",
       "dev": true
     },
+    "node_modules/@enhance/shadow-element": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@enhance/shadow-element/-/shadow-element-1.0.3.tgz",
+      "integrity": "sha512-jipeSg/9EL/LfnuyFxQ+7rEGPVgHl8ua1n6E+2zoOBdYfKV7N73RZVLNKTs6JwMpjv4dJSmgirAKsIuQzHwdSw==",
+      "dev": true,
+      "dependencies": {
+        "@enhance/base-element": "^1.1.0",
+        "@enhance/shadow-element-mixin": "^1.0.0",
+        "@enhance/template-mixin": "^1.0.0"
+      }
+    },
+    "node_modules/@enhance/shadow-element-mixin": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@enhance/shadow-element-mixin/-/shadow-element-mixin-1.0.0.tgz",
+      "integrity": "sha512-8+52EyYztY986+e5seNTkQaiDm56usxGAk94DiOG9zRAU6aSw4spOKD6yUTFlhT1clp/WaKrJwjM6X38m1iUAQ==",
+      "dev": true
+    },
     "node_modules/@enhance/store": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@enhance/store/-/store-1.0.1.tgz",
@@ -5110,6 +5128,23 @@
       "integrity": "sha512-bBGdt47zOJ+eWD8/fK4E4IjyonvjSKRcNBM07gUXbkgPbMPdIoJYlae8IQGHC2aiI+frdFjlQCE5d2wiQA2a0w==",
       "dev": true
     },
+    "@enhance/shadow-element": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@enhance/shadow-element/-/shadow-element-1.0.3.tgz",
+      "integrity": "sha512-jipeSg/9EL/LfnuyFxQ+7rEGPVgHl8ua1n6E+2zoOBdYfKV7N73RZVLNKTs6JwMpjv4dJSmgirAKsIuQzHwdSw==",
+      "dev": true,
+      "requires": {
+        "@enhance/base-element": "^1.1.0",
+        "@enhance/shadow-element-mixin": "^1.0.0",
+        "@enhance/template-mixin": "^1.0.0"
+      }
+    },
+    "@enhance/shadow-element-mixin": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@enhance/shadow-element-mixin/-/shadow-element-mixin-1.0.0.tgz",
+      "integrity": "sha512-8+52EyYztY986+e5seNTkQaiDm56usxGAk94DiOG9zRAU6aSw4spOKD6yUTFlhT1clp/WaKrJwjM6X38m1iUAQ==",
+      "dev": true
+    },
     "@enhance/store": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@enhance/store/-/store-1.0.1.tgz",
diff --git a/package.json b/package.json
index fa2ecc2..04fba34 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
   "homepage": "https://github.com/enhance-dev/enhance-morphdom-mixin#readme",
   "devDependencies": {
     "@enhance/custom-element": "^1.0.2",
+    "@enhance/shadow-element": "^1.0.3",
     "@enhance/store": "^1.0.1",
     "@esm-bundle/chai": "^4.3.4-fix.0",
     "@rollup/plugin-node-resolve": "^15.2.2",
diff --git a/test/mm-test.html b/test/mm-test.html
index 70db93f..d9a734c 100644
--- a/test/mm-test.html
+++ b/test/mm-test.html
@@ -8,11 +8,13 @@
 <body>
 
   <my-header heading="My list"></my-header>
+  <my-shady-header heading="My shady list"></my-shady-header>
 
   <script type="module">
     import { runTests } from '@web/test-runner-mocha'
     import { assert } from '@esm-bundle/chai'
     import CustomElement from '@enhance/custom-element'
+    import ShadowElement from '@enhance/shadow-element'
     import MorphdomMixin from '../index.mjs'
 
     function MyHeader({ html, state  }) {
@@ -50,9 +52,28 @@ <h1>${heading}</h1>
     }
     customElements.define('my-header', MyHeaderElement)
 
+    class MyShadyHeaderElement extends MorphdomMixin(ShadowElement) {
+      constructor() {
+        super()
+        this.header = this.querySelector('h1')
+        this.paragraph = this.querySelector('p')
+        this.anchor = this.querySelector('a')
+      }
+
+      render(args) {
+        return MyHeader(args)
+      }
+
+      static get observedAttributes() {
+        return [ 'heading' ]
+      }
+    }
+
+    customElements.define('my-shady-header', MyShadyHeaderElement)
+
     runTests(()=> {
       describe('MorphdomMixin', ()=> {
-        it('should morph component', ()=> {
+        it('should morph custom element', ()=> {
           const testComponent = document.querySelector('my-header')
           testComponent.setAttribute('heading', 'YOLO')
           const testHeader = testComponent.querySelector('h1')
@@ -65,6 +86,19 @@ <h1>${heading}</h1>
           assert.equal(textContentParagraph, 'YOLO', 'Should morph heading')
           assert.equal(textContentAnchor, '/foo/YOLO', 'Should morph heading')
         })
+        it('should morph shadow element', ()=> {
+          const testComponent = document.querySelector('my-shady-header')
+          testComponent.setAttribute('heading', 'YOLO')
+          const testHeader = testComponent.shadowRoot.querySelector('h1')
+          const testParagraph = testComponent.shadowRoot.querySelector('p')
+          const testAnchor = testComponent.shadowRoot.querySelector('a')
+          const textContent = testHeader.textContent
+          const textContentParagraph = testParagraph.textContent
+          const textContentAnchor = testAnchor.getAttribute('href')
+          assert.equal(textContent, 'YOLO', 'Should morph heading')
+          assert.equal(textContentParagraph, 'YOLO', 'Should morph heading')
+          assert.equal(textContentAnchor, '/foo/YOLO', 'Should morph heading')
+        })
       })
     })
   </script>