Open Philipp-M opened 4 years ago
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" });
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.
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.