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

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


Copy link

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



Reproduction link

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


This comment has been minimized.

Copy link

@posva posva commented Mar 26, 2020 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
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.