diff --git a/docs/pages/components/select.md b/docs/pages/components/select.md index 15ef3da3..8495a0a5 100644 --- a/docs/pages/components/select.md +++ b/docs/pages/components/select.md @@ -504,17 +504,17 @@ Remember that custom tags are rendered in a shadow root. To style them, you can ### Lazy loading options -Lazy loading options is very hard to get right. `` largely follows how a native `` works. Here are the following conditions: -- If a `` is created without any options, but is given a `value` attribute, its `value` will be `""`, and then when options are added, if any of the options have a value equal to the `` value, the value of the `` will equal that of the option. +- If a `` is created without any options, but is given a `value` attribute, its `value` will be `""`, and then when options are added, if any of the options have a value equal to the `` value, the value of the `` will equal that of the option. -EX: `` will have a value of `""` until `Foo` connects, at which point its value will become `"foo"` when submitting. +EX: `` will have a value of `""` until `Foo` connects, at which point its value will become `"foo"` when submitting. -- If a `` with an initial value has multiple values, but only some of the options are present, it will only respect the options that are present, and if a selected option is loaded in later, _AND_ the value of the select has not changed via user interaction or direct property assignment, it will add the selected option to the form value and to the `.value` of the select. +- If a `` with an initial value has multiple values, but only some of the options are present, it will only respect the options that are present, and if a selected option is loaded in later, _AND_ the value of the select has not changed via user interaction or direct property assignment, it will add the selected option to the form value and to the `.value` of the select. -This can be hard to conceptualize, so heres a fairly large example showing how lazy loaded options work with `` and `` when given initial value attributes. Feel free to play around with it in a codepen. +This can be hard to conceptualize, so heres a fairly large example showing how lazy loaded options work with `` and `` when given initial value attributes. Feel free to play around with it in a codepen. ```html:preview
@@ -607,4 +607,4 @@ This can be hard to conceptualize, so heres a fairly large example showing how l :::warning Be sure you trust the content you are outputting! Passing unsanitized user input to `getTag()` can result in XSS vulnerabilities. -::: +::: \ No newline at end of file diff --git a/src/components/select/select.component.ts b/src/components/select/select.component.ts index d91adfb2..3af09dc4 100644 --- a/src/components/select/select.component.ts +++ b/src/components/select/select.component.ts @@ -503,8 +503,8 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon /* @internal - used by options to update labels */ public handleDefaultSlotChange() { - if (!customElements.get('wa-option')) { - customElements.whenDefined('wa-option').then(() => this.handleDefaultSlotChange()); + if (!customElements.get('sl-option')) { + customElements.whenDefined('sl-option').then(() => this.handleDefaultSlotChange()); } const allOptions = this.getAllOptions();