Updates querySelector

enhance-dev · May 30, 2024 · 65dd151 · 65dd151
1 parent 7e0ed71
commit 65dd151
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 4 deletions.
diff --git a/index.mjs b/index.mjs
@@ -31,7 +31,7 @@ const MorphdomMixin = (superclass) => class extends superclass {
 
     if (!this.shadowRoot && this['expandSlots']) {
       const slotEl = document.createElement('div')
-      const slottedElements = root.querySelectorAll('[slot=" "]')
+      const slottedElements = root.querySelectorAll('[slot=""]')
       for (const value of slottedElements.values()) {
         slotEl.appendChild(value)
       }

diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
   },
   "homepage": "https://github.com/enhance-dev/enhance-morphdom-mixin#readme",
   "devDependencies": {
-    "@enhance/custom-element": "^1.2.3",
+    "@enhance/custom-element": "^1.2.3-next.0",
     "@enhance/shadow-element": "^1.0.6",
     "@enhance/store": "^1.0.2",
     "@esm-bundle/chai": "^4.3.4-fix.0",

diff --git a/test/mm-test.html b/test/mm-test.html
@@ -7,9 +7,14 @@
 </head>
 <body>
 
-  <my-header heading="My list"></my-header>
+  <my-header id="one" heading="My list"></my-header>
+
   <my-shady-header heading="My shady list"></my-shady-header>
 
+  <my-header id="two" heading="My unnamed slot button list">
+    <button>Submit</button>
+  </my-header>
+
   <script type="module">
     import { runTests } from '@web/test-runner-mocha'
     import { assert } from '@esm-bundle/chai'
@@ -30,6 +35,7 @@
         <h1>${heading}</h1>
         <p>${heading}</p>
         <a href="/foo/${heading}"></a>
+        <slot></slot>
       `
     }
 
@@ -69,7 +75,7 @@ <h1>${heading}</h1>
     runTests(()=> {
       describe('MorphdomMixin', ()=> {
         it('should morph custom element', ()=> {
-          const testComponent = document.querySelector('my-header')
+          const testComponent = document.getElementById('one')
           testComponent.setAttribute('heading', 'YOLO')
           const testHeader = testComponent.querySelector('h1')
           const testParagraph = testComponent.querySelector('p')
@@ -96,6 +102,22 @@ <h1>${heading}</h1>
           assert.equal(textContentAnchor, '/foo/YOLO', 'Should morph heading')
         })
 
+        it('should morph custom element with unnamed slot', ()=> {
+          const testComponent = document.getElementById('two')
+          testComponent.setAttribute('heading', 'SLOT')
+          const testHeader = testComponent.querySelector('h1')
+          const testParagraph = testComponent.querySelector('p')
+          const testAnchor = testComponent.querySelector('a')
+          const testButton = testComponent.querySelector('button')
+          const textContent = testHeader.textContent
+          const textContentParagraph = testParagraph.textContent
+          const textContentAnchor = testAnchor.getAttribute('href')
+          assert.equal(textContent, 'SLOT', 'Should morph heading')
+          assert.equal(textContentParagraph, 'SLOT', 'Should morph heading')
+          assert.equal(textContentAnchor, '/foo/SLOT', 'Should morph heading')
+          assert.ok(testButton, 'Should morph unnamed slot content')
+        })
+
       })
     })
   </script>