search

vuejs / vue

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core
http://v2.vuejs.org
MIT License
207.67k stars 33.67k forks source link

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

Open Philipp-M opened 4 years ago

Philipp-M commented 4 years ago

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 commented 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" });
1aron commented 4 years ago

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.