js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix custom tag example

Browse Source
This commit is contained in:
Cory LaViska
2025-12-05 09:31:01 -05:00
parent a1e9d8e881
commit fd8f73160c
1 changed files with 6 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/webawesome/docs/docs/components/select.md
View File

@@ -285,8 +285,9 @@ Remember that custom tags are rendered in a shadow root. To style them, you can
const name = option.querySelector('wa-icon[slot="start"]').name;
// You can return a string, a Lit Template, or an HTMLElement here
// Important: include data-value so the tag can be removed properly!
return `
<wa-tag with-remove>
<wa-tag with-remove data-value="${option.value}">
<wa-icon name="${name}"></wa-icon>
${option.label}
</wa-tag>
@@ -299,6 +300,10 @@ Remember that custom tags are rendered in a shadow root. To style them, you can
Be sure you trust the content you are outputting! Passing unsanitized user input to `getTag()` can result in XSS vulnerabilities.
:::
:::info
When using custom tags with `with-remove`, you must include the `data-value` attribute set to the option's value. This allows the select to identify which option to deselect when the tag's remove button is clicked.
:::
### Lazy loading options
Lazy loading options works similarly to native `<select>` elements. The select component handles various scenarios intelligently: