You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I've created a simple repository to illustrate a bug in Svelte with custom element overrides using the is="element-name" property. At the moment, the way Svelte is creating elements breaks the usage of this property and the custom element overrides are never actually invoked. My naive suspicion is that elements are being created with document.CreateElement() without including the second is: 'element-name' parameter.
You can see this behavior in action by installing linked project with node i and running it with node run dev. An express server will start up at localhost:4001 and show a quick example of how an element overriding <a> does not work when written directly in Svelte, but does work when placed on the page as a raw string. Here is an example:
<h1>Does Not Work (Svelte Native)</h1>
<a is=''element-override">The custom component will not run and will not replace this text</a>
<h1>Does Work (Raw String)</h1>
{@html "<a is='element-override'>The custom component will run and will replace this text</a>"}
While the raw string is a simi-usable workaround, it is not ideal as it means one does not get the benefits of svelte's property-setting functionality with standard custom elements.
Thank you for taking the time to read this.
The text was updated successfully, but these errors were encountered:
Svelte and Custom Element Overrides
I've created a simple repository to illustrate a bug in Svelte with custom element overrides using the
is="element-name"
property. At the moment, the way Svelte is creating elements breaks the usage of this property and the custom element overrides are never actually invoked. My naive suspicion is that elements are being created with document.CreateElement() without including the secondis: 'element-name'
parameter.You can see this behavior in action by installing linked project with
node i
and running it withnode run dev
. An express server will start up at localhost:4001 and show a quick example of how an element overriding<a>
does not work when written directly in Svelte, but does work when placed on the page as a raw string. Here is an example:The custom element:
The Svelte component:
While the raw string is a simi-usable workaround, it is not ideal as it means one does not get the benefits of svelte's property-setting functionality with standard custom elements.
Thank you for taking the time to read this.
The text was updated successfully, but these errors were encountered: