From c79ad206b2ea0127d056f1a30c40e1f630cbe85d Mon Sep 17 00:00:00 2001 From: Patrick Nelson Date: Fri, 9 Jun 2023 19:16:40 -0700 Subject: [PATCH] Documenting the future of attribute-to-prop nomenclature (following https://github.com/sveltejs/svelte/pull/8457 and https://lit.dev/docs/components/properties/#observed-attributes). --- README.md | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 08329f7..1da136f 100644 --- a/README.md +++ b/README.md @@ -52,7 +52,7 @@ svelteRetag({ tagname: 'hello-world', // Optional: - attributes: ['greeting', 'name'], + attributes: ['greetperson'], shadow: false, href: '/your/stylesheet.css', // Only necessary if shadow is true }); @@ -62,19 +62,23 @@ Now anywhere you use the `` tag, you'll get a Svelte component. Not name to [anything containing a dash](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements). +To align with future versions of Svelte, attributes are automatically converted to lowercase (following +the [Lit-style naming convention](https://lit.dev/docs/components/properties/#observed-attributes)). So, `greetPerson` +on your component would be automatically made available as `greetperson` on your custom element. + ```html - + ``` ### Options -| Option | Default | Description | -|------------|--------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| component | _(required)_ | The constructor for your Svelte component (from `import`) | -| tagname | _(required)_ | The custom element tag name to use ([must contain a dash](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements)) | -| attributes | `[]` | array - List of attributes to reactively forward to your component (does not reflect changes inside the component) | -| shadow | `false` | boolean - Should this component use shadow DOM.
**Note:** Only basic support for shadow DOM is currently provided. See https://github.com/patricknelson/svelte-retag/issues/6. | -| href | `''` | link to your stylesheet - Allows you to ensure your styles are included in the shadow DOM (thus only required when `shadow` is set to `true`). | +| Option | Default | Description | +|------------|--------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| component | _(required)_ | The constructor for your Svelte component (from `import`) | +| tagname | _(required)_ | The custom element tag name to use ([must contain a dash](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements)) | +| attributes | `[]` | array - List of attributes to reactively forward to your component (does not reflect changes inside the component).
**Important:** Attributes must be the lowercase version of your Svelte component props ([similar to Lit](https://lit.dev/docs/components/properties/#observed-attributes)). | +| shadow | `false` | boolean - Should this component use shadow DOM.
**Note:** Only basic support for shadow DOM is currently provided. See https://github.com/patricknelson/svelte-retag/issues/6. | +| href | `''` | link to your stylesheet - Allows you to ensure your styles are included in the shadow DOM (thus only required when `shadow` is set to `true`). | **Note:** For portability, `svelte-retag`'s API is fully backward compatible with [`svelte-tag@^1.0.0`](https://github.com/crisward/svelte-tag).