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

Customized built-in elements (Web Components) are not working in Single File Components #11243

Open
Philipp-M opened this issue Mar 25, 2020 · 1 comment

Comments

@Philipp-M
Copy link

@Philipp-M Philipp-M commented Mar 25, 2020

Version

2.6.11

Reproduction link

https://codesandbox.io/s/confident-robinson-nl2c5

Steps to reproduce

Define a customized built-in element and try to use it inside a template of a Single File Component.

It doesn't matter if Vue.config.ignoredElements defines the name of the component as it is just converted into the autonomous element syntax (which unfortunately doesn't work with browsers)

What is expected?

Working customized built-in component using the template syntax in Vue Single File Components.

What is actually happening?

Vue doesn't invoke the custom element constructor, and tries to render it as normal HTML element.


There is an issue about this on Stack Overflow: https://stackoverflow.com/questions/56162647/how-to-use-customized-built-in-element-in-vuejs
But even the proposed solution using a custom directive doesn't invoke the Custom Element constructor, see reproduction example.
I guess that is because previously the (non-customized) built-in constructor is invoked.

@posva

This comment has been minimized.

Copy link
Member

@posva posva commented Mar 26, 2020

https://github.com/vuejs/rfcs/blob/custom-elements-interop/active-rfcs/0000-custom-elements-interop.md should solve the problem you are experiencing

The directive solution won't work because is should be provided when creating the element:

const plasticButton = document.createElement("button", { is: "plastic-button" });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.