From f320b8b43fce762ba179bdc54b0cbbcff8dbc963 Mon Sep 17 00:00:00 2001 From: Thomas Allmer Date: Mon, 7 Jun 2021 16:29:11 +0200 Subject: [PATCH] fix: create scoped elements also when slotting them in Co-authored-by: Thijs Louisse --- .changeset/clean-lobsters-glow.md | 9 +++++++++ docs/components/interaction/switch/overview.md | 4 ++-- packages/form-core/src/validate/ValidateMixin.js | 6 ++---- .../test/model-value-consistency.test.js | 8 ++++++-- packages/listbox/src/ListboxMixin.js | 6 ++---- packages/select-rich/src/LionSelectRich.js | 5 ++--- packages/switch/src/LionSwitch.js | 7 ++----- yarn.lock | 2 +- 8 files changed, 26 insertions(+), 21 deletions(-) create mode 100644 .changeset/clean-lobsters-glow.md diff --git a/.changeset/clean-lobsters-glow.md b/.changeset/clean-lobsters-glow.md new file mode 100644 index 000000000..5009d8cda --- /dev/null +++ b/.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 diff --git a/docs/components/interaction/switch/overview.md b/docs/components/interaction/switch/overview.md index 4317b7793..1c5cb4034 100644 --- a/docs/components/interaction/switch/overview.md +++ b/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'; ``` diff --git a/packages/form-core/src/validate/ValidateMixin.js b/packages/form-core/src/validate/ValidateMixin.js index 0bde13dc3..65f8ea1e5 100644 --- a/packages/form-core/src/validate/ValidateMixin.js +++ b/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; }, diff --git a/packages/form-integrations/test/model-value-consistency.test.js b/packages/form-integrations/test/model-value-consistency.test.js index c4f388334..c74c09467 100644 --- a/packages/form-integrations/test/model-value-consistency.test.js +++ b/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}`) ); 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); diff --git a/packages/listbox/src/ListboxMixin.js b/packages/listbox/src/ListboxMixin.js index c9d87b48d..f3f9c96c9 100644 --- a/packages/listbox/src/ListboxMixin.js +++ b/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; diff --git a/packages/select-rich/src/LionSelectRich.js b/packages/select-rich/src/LionSelectRich.js index 3f0599491..a9593a481 100644 --- a/packages/select-rich/src/LionSelectRich.js +++ b/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; }, diff --git a/packages/switch/src/LionSwitch.js b/packages/switch/src/LionSwitch.js index b018ff831..c84f85028 100644 --- a/packages/switch/src/LionSwitch.js +++ b/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; }, diff --git a/yarn.lock b/yarn.lock index 6e774347b..8ad1757c9 100644 --- a/yarn.lock +++ b/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==