Update allows for morphing of shadowRoot as well

enhance-dev · Oct 5, 2023 · c8624c9 · c8624c9
1 parent 7992681
commit c8624c9
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 2 deletions.
diff --git 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
diff --git 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
@@ -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>