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

Allow custom tag to extend existing tags #8903

Closed
nosovk opened this issue Jul 3, 2023 · 1 comment
Closed

Allow custom tag to extend existing tags #8903

nosovk opened this issue Jul 3, 2023 · 1 comment

Comments

@nosovk
Copy link
Contributor

nosovk commented Jul 3, 2023

Describe the problem

I'm using custom elements to extend existing html templates. Common case is to add some new tags, like <my-video>, <my-menu> etc.
Unfortunately those tags does not play good with SEO.
In custom elements specification mentioned that extend of new tag registration we can extend existing one.

Describe the proposed solution

add additional property to customElement configuration. Like:

<svelte:options  customElement={{
    tag: 'my-video',
    extends: 'video',
    baseClass: HTMLVideoElement,
    props: {
      name: { reflect: true, type: 'String', attribute: 'src' }
    }
  }}>
<script>
export let src; // here we will get src tag from html
</script>
<video {src} /> // and render own video tag inside custom component.

Where in element we specify which tag we want to extend.
Then we can use the resulting component as <video as="my-video" src="https://video.mp4">

Alternatives considered

customElements.define("my-video", Video, { extends: "video" });

didn't work,
because with tags like video we must create Video as

class Video extends HTMLVideoElement

Which is currently not possible in svelte.

Importance

would make my life easier

@Conduitry
Copy link
Member

Duplicate of #4168.

@Conduitry Conduitry closed this as not planned Won't fix, can't repro, duplicate, stale Jul 4, 2023
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

No branches or pull requests

2 participants