Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom Element Overrides are not working correctly. #3182

Closed
taylorhadden opened this issue Jul 5, 2019 · 2 comments · Fixed by #3418
Closed

Custom Element Overrides are not working correctly. #3182

taylorhadden opened this issue Jul 5, 2019 · 2 comments · Fixed by #3418

Comments

@taylorhadden
Copy link

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 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:

The custom element:

class ElementOverride extends HTMLAnchorElement {
  connectedCallback() {
    this.innerHtml = 'It worked!'
  }
}

customElements.define('element-override', ElementOverride, {
  extends: 'a'
})

The Svelte component:

<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.

@taylorhadden
Copy link
Author

I have posted a proof-of-concept PR (#3184) that fixes this problem when "is" is bound to a Text value.

Rich-Harris added a commit that referenced this issue Aug 18, 2019

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
support is attribute, with a warning.
@Rich-Harris
Copy link
Member

Fixed in 3.9.0. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants