feat(core): support default slot for SlotMixin

jorgecasar · Sep 13, 2021 · bcf68ce · bcf68ce
1 parent dec9c75
commit bcf68ce
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 2 deletions.
diff --git a/.changeset/healthy-parents-happen.md b/.changeset/healthy-parents-happen.md
@@ -0,0 +1,5 @@
+---
+'@lion/core': patch
+---
+
+Allow SlotMixin to work with default slots using empty string as key (''). Ensure that we do not add slot attribute to the slottable in this case.
diff --git a/packages/core/src/SlotMixin.js b/packages/core/src/SlotMixin.js
@@ -49,7 +49,15 @@ const SlotMixinImplementation = superclass =>
     _connectSlotMixin() {
       if (!this.__isConnectedSlotMixin) {
         Object.keys(this.slots).forEach(slotName => {
-          if (!Array.from(this.children).find(el => el.slot === slotName)) {
+          const hasSlottableFromUser =
+            slotName === ''
+              ? // for default slot (''), we can't use el.slot because polyfill for IE11
+                // will do .querySelector('[slot=]') which produces a fatal error
+                // therefore we check if there's children that do not have a slot attr
+                Array.from(this.children).find(el => !el.hasAttribute('slot'))
+              : Array.from(this.children).find(el => el.slot === slotName);
+
+          if (!hasSlottableFromUser) {
             const slotContent = this.slots[slotName]();
             /** @type {Node[]} */
             let nodes = [];
@@ -64,7 +72,7 @@ const SlotMixinImplementation = superclass =>
               if (!(node instanceof Node)) {
                 return;
               }
-              if (node instanceof Element) {
+              if (node instanceof Element && slotName !== '') {
                 node.setAttribute('slot', slotName);
               }
               this.appendChild(node);

diff --git a/packages/core/test/SlotMixin.test.js b/packages/core/test/SlotMixin.test.js
@@ -19,6 +19,41 @@ describe('SlotMixin', () => {
     expect(el.children[0].slot).to.equal('feedback');
   });
 
+  it("supports unnamed slot with ''", async () => {
+    const tag = defineCE(
+      class extends SlotMixin(LitElement) {
+        get slots() {
+          return {
+            ...super.slots,
+            '': () => document.createElement('div'),
+          };
+        }
+      },
+    );
+    const el = await fixture(`<${tag}></${tag}>`);
+    expect(el.children[0].slot).to.equal('');
+    expect(el.children[0]).dom.to.equal('<div></div>');
+  });
+
+  it('supports unnamed slot in conjunction with named slots', async () => {
+    const tag = defineCE(
+      class extends SlotMixin(LitElement) {
+        get slots() {
+          return {
+            ...super.slots,
+            foo: () => document.createElement('a'),
+            '': () => document.createElement('div'),
+          };
+        }
+      },
+    );
+    const el = await fixture(`<${tag}></${tag}>`);
+    expect(el.children[0].slot).to.equal('foo');
+    expect(el.children[1].slot).to.equal('');
+    expect(el.children[0]).dom.to.equal('<a slot="foo"></a>');
+    expect(el.children[1]).dom.to.equal('<div></div>');
+  });
+
   it('does not override user provided slots', async () => {
     const tag = defineCE(
       class extends SlotMixin(LitElement) {

diff --git a/yarn.lock b/yarn.lock
@@ -1289,6 +1289,13 @@
   dependencies:
     vary "^1.1.2"
 
+"@lion/accordion@^0.6.1":
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/@lion/accordion/-/accordion-0.6.3.tgz#93addeec077efc04d7059e7892e3e4844b4ef093"
+  integrity sha512-hk0bkCo5DbRwyHRlkoAtAnfxGIV55w7A4jHRhLRtNLN+LOLn/S/+cfN93/WuugXmNd57DoeGUvrwGbb9Wbdf1g==
+  dependencies:
+    "@lion/core" "0.18.2"
+
 "@lion/[email protected]":
   version "0.16.0"
   resolved "https://registry.yarnpkg.com/@lion/core/-/core-0.16.0.tgz#c4c8ac81b8d5bece6d40d561a392382c7ae73533"
@@ -1299,6 +1306,15 @@
     lit-element "~2.4.0"
     lit-html "^1.3.0"
 
+"@lion/[email protected]":
+  version "0.18.2"
+  resolved "https://registry.yarnpkg.com/@lion/core/-/core-0.18.2.tgz#ffac7a4a4811277cf864afdc7114dbb036a2e27a"
+  integrity sha512-wlzhAZUTTBYBUNeO+/dhMmh/bkzuwKOORhl7bh5PDMeHSLpTpubs5AKjrYLhF16qxczm0k/GautyJ9wZUfq2ZA==
+  dependencies:
+    "@open-wc/dedupe-mixin" "^1.2.18"
+    "@open-wc/scoped-elements" "^2.0.0-next.3"
+    lit "^2.0.0-rc.2"
+
 "@lion/overlays@^0.26.1":
   version "0.26.1"
   resolved "https://registry.yarnpkg.com/@lion/overlays/-/overlays-0.26.1.tgz#d1bfa4f5f97108982afa7b409ba4300f8b2d2ba5"