Vue: [bug] Unable to use Custom Elements (Web Components) inside Vue components.

[trusktr]

Summary

I have some custom elements registered, for example:

class AmbientLight { ... }
customElements.define('i-ambient-light', AmbientLight)

Then, if I try to use them in a Vue component like so:

<template>
  <i-ambient-light>
  </i-ambient-light>
</template>
<style> ... </style>
<script> ... </script>

then I get an error like the following:

[Vue warn]: Unknown custom element: <i-ambient-light> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)

More info

My Vue component's entire <template> content looks like this:

<template>
    <i-scene experimental-webgl="true" id="scene"
        TODO-perspective="800"
        backgroundColor="0 0 0"
        backgroundOpacity="0"
        style="perspective: 800px; background: #252525"
        shadowmap-type="pcfsoft" // one of basic, pcf, pcfsoft
        >

        <i-ambient-light color="#fff" intensity="1"></i-ambient-light>

        <!--<i-plane sizeMode="proportional proportional" size="1 1 0" color="teal" rotation="0 71 0"></i-plane>-->
        <!--<i-mesh id="plane" has="plane-geometry phong-material" sizeMode="proportional proportional" size="1 1 0" color="teal" rotation="0 71 0"></i-mesh>-->

        <!-- TODO FIXME using dom-plane instead of node makes time until first paint for WebGL much longer. Why? -->
        <!--<i-node id="plane" sizeMode="proportional proportional" size="1 1 0" style="background: #ddd" rotation="0 71 0"> <span>Hello</span> </i-node>-->
        <!--<i-dom-plane id="plane" sizeMode="proportional proportional" size="1 1 0" style="background: #ddd" rotation="0 71 0"> <span>Hello</span> </i-dom-plane>-->

        <i-node sizeMode="proportional proportional" size="1 1 0" style="background: #ddd">
            <h1> HTML content, with lighting and shadows! </h1>
            <i-node position="0 100 10" size="70 21 0" align="0.5 0 0" mountPoint="0.5 0 0">
                <button> A button! </button>
            </i-node>
        </i-node>

        <i-node id="root" align="0.5 0 0.5" size="0 0 0" position="0 180 100">

            <i-dom-plane
                size="200 200 0"
                mountPoint="0.5 0 0.5"
                style="background: #A1D490">

                <h1>Hello</h1>

            </i-dom-plane>

            <i-sphere size="50 50 50" mountPoint="0.5 0 0.5" position="60 120 80" color="#156289"></i-sphere>

            <i-node size="50 50 50" mountPoint="0.5 0 0.5" position="20 120 110" style="background: orange">
                3D!
            </i-node>

            <i-box id="cube" size="50 50 50" mountPoint="0.5 0 0.5" position="-60 120 80" color="#246157"></i-box>

            <i-mesh id="light" has="sphere-geometry basic-material"
                size="10 10 10" color="white"
                position="10 0 130"
                receive-shadow="false" cast-shadow="false"
                >
                <i-point-light color="white" position="0 0 0" size="0 0 0" cast-shadow="true" intensity="1"></i-point-light>
            </i-mesh>

        </i-node>

    </i-scene>
</template>

The only thing outputted to the DOM is this:

<i-ambient-light data-v-4dab2b2a="" color="#fff" intensity="1"></i-ambient-light>

[vue-bot]

Hello, your issue has been closed because it does not conform to our issue requirements. Please use the Issue Helper to create an issue - thank you!

[sqal]

https://vuejs.org/v2/api/#ignoredElements