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

[Philipp-M]

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]

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" });

[1aron]

I have the same issue. When I create a built-in element via Web API ( document.createElement("button", { is: "fancy-button" }) ), the built-in element wasn't initialized.