fix: create scoped elements also when slotting them in

Co-authored-by: Thijs Louisse <Thijs.Louisse@ing.com>

.changeset/clean-lobsters-glow.md

@@ -0,0 +1,9 @@
+---
+'@lion/form-core': patch
+'@lion/form-integrations': patch
+'@lion/listbox': patch
+'@lion/select-rich': patch
+'@lion/switch': patch
+---
+
+use customElementRegistry from component registry for slots used via SlotMixin

docs/components/interaction/switch/overview.md

@@ -4,7 +4,7 @@ A web component that is used to toggle a property or feature on or off. Toggling
 
 ```js script
 import { html } from '@lion/core';
-import '@lion/switch/define';
+import '@lion/switch/define-switch';
 ```
 
 ```js preview-story
@@ -26,5 +26,5 @@ npm i --save @lion/switch
 ```js
 import { LionSwitch } from '@lion/switch';
 // or
-import '@lion/switch/define';
+import '@lion/switch/define-switch';
 ```

packages/form-core/src/validate/ValidateMixin.js

@@ -99,13 +99,11 @@ export const ValidateMixinImplementation = superclass =>
        * @typedef {Object} ScopedElementsObj
        * @property {getScopedTagName} getScopedTagName
        */
-      const ctor = /** @type {typeof ValidateMixin & ScopedElementsObj} */ (this.constructor);
       return {
         ...super.slots,
         feedback: () => {
-          const feedbackEl = document.createElement(
-            ctor.getScopedTagName('lion-validation-feedback'),
-          );
+          // @ts-ignore we load a polyfill to support createElement on shadowRoot
+          const feedbackEl = this.shadowRoot.createElement('lion-validation-feedback');
           feedbackEl.setAttribute('data-tag-name', 'lion-validation-feedback');
           return feedbackEl;
         },

packages/form-integrations/test/model-value-consistency.test.js

@@ -267,7 +267,8 @@ describe('lion-select', () => {
   });
 });
 
-['combobox', 'listbox', 'select-rich'].forEach(chunk => {
+// TODO: change back order when scoped-elements (polyfill) fixed side effects
+['select-rich', 'combobox', 'listbox'].forEach(chunk => {
   const tagname = `lion-${chunk}`;
   const tag = unsafeStatic(tagname);
   describe(`${tagname}`, () => {
@@ -341,6 +342,7 @@ describe('lion-fieldset', () => {
 
 describe('detail.isTriggeredByUser', () => {
   const allFormControls = [
+    'switch', // TODO: move back below when scoped-elements (polyfill) fixed side effects
     // 1) Fields
     'field',
     // 1a) Input Fields
@@ -357,7 +359,7 @@ describe('detail.isTriggeredByUser', () => {
     'option',
     'checkbox',
     'radio',
-    'switch',
+    // 'switch',
     // 1c) Choice Group Fields
     'select',
     'listbox',
@@ -472,6 +474,7 @@ describe('detail.isTriggeredByUser', () => {
           await fixture(html`<${tag} name="${name}">${childrenEl}</${tag}>`)
         );
       await el.registrationComplete;
+
       el.addEventListener('model-value-changed', spy);
 
       /**
@@ -504,6 +507,7 @@ describe('detail.isTriggeredByUser', () => {
 
         await resetChoiceFieldToForceRepropagation(formControl);
         mimicUserInput(formControl, 'userValue');
+
         expect(spy.firstCall.args[0].detail.isTriggeredByUser).to.be.true;
 
         await resetChoiceFieldToForceRepropagation(formControl);

packages/listbox/src/ListboxMixin.js

@@ -159,10 +159,8 @@ const ListboxMixinImplementation = superclass =>
       return {
         ...super.slots,
         input: () => {
-          const lionOptions = /** @type {HTMLElement & FormRegistrarPortalHost} */ (
-            // @ts-expect-error [external] fix types scopedElements
-            document.createElement(ListboxMixin.getScopedTagName('lion-options'))
-          );
+          // @ts-ignore we load a polyfill to support createElement on shadowRoot
+          const lionOptions = this.shadowRoot.createElement('lion-options');
           lionOptions.setAttribute('data-tag-name', 'lion-options');
           lionOptions.registrationTarget = this;
           return lionOptions;

packages/select-rich/src/LionSelectRich.js

@@ -72,9 +72,8 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
     return {
       ...super.slots,
       invoker: () => {
-        const invokerEl = document.createElement(
-          LionSelectRich.getScopedTagName('lion-select-invoker'),
-        );
+        // @ts-ignore we load a polyfill to support createElement on shadowRoot
+        const invokerEl = this.shadowRoot.createElement('lion-select-invoker');
         invokerEl.setAttribute('data-tag-name', 'lion-select-invoker');
         return invokerEl;
       },

packages/switch/src/LionSwitch.js

@@ -42,11 +42,8 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField))
     return {
       ...super.slots,
       input: () => {
-        const btnEl = document.createElement(
-          /** @type {typeof LionSwitch} */ (this.constructor).getScopedTagName(
-            'lion-switch-button',
-          ),
-        );
+        // @ts-ignore we load a polyfill to support createElement on shadowRoot
+        const btnEl = this.shadowRoot.createElement('lion-switch-button');
         btnEl.setAttribute('data-tag-name', 'lion-switch-button');
         return btnEl;
       },

yarn.lock

@@ -1701,7 +1701,7 @@
     "@open-wc/dedupe-mixin" "^1.3.0"
     lit-html "^1.0.0"
 
-"@open-wc/scoped-elements@^2.0.0-next.0", "@open-wc/scoped-elements@^2.0.0-next.3":
+"@open-wc/scoped-elements@^2.0.0", "@open-wc/scoped-elements@^2.0.0-next.0":
   version "2.0.0-next.3"
   resolved "https://registry.yarnpkg.com/@open-wc/scoped-elements/-/scoped-elements-2.0.0-next.3.tgz#adbd9d6fddc67158fd11ffe78c5e11aefdaaf8af"
   integrity sha512-9dT+0ea/RKO3s2m5H+U8gwG7m1jE89JhgWKI6FnkG4pE9xMx8KACoLZZcUfogVjb6/vKaIeoCj6Mqm+2HiqCeQ==