custom-element: adding attributes without props
Jan 25th 2022
Version
3.2.29
Reproduction link
Steps to reproduce
<!-- index.html -->
<html>
<body>
<my-custom-element class="my-class"></my-custom-element>
<script src="./main.ts"></script>
</body>
</html>
// main.ts
import { defineCustomElement } from 'vue'
import MyCustomElement from './MyCustomElement.vue'
customElements.define('my-custom-element' defineCustomElement(MyCustomElement))
<!-- MyCustomElement.vue -->
<template>
<p>hi !</p>
</template>
What is expected?
The component should mount.
The extra class attribute should not be used by the component as no props is declared.
What is actually happening?
Custom element doesn't load
Uncaught TypeError: Cannot read properties of undefined (reading 'class')
at resolve2 (runtime-dom.esm-bundler.js:544:33)
at VueCustomElement._resolveDef (runtime-dom.esm-bundler.js:579:13)
at VueCustomElement.connectedCallback (runtime-dom.esm-bundler.js:506:18)
at main.ts:4:16
Note: When adding a && props check here : https://github.com/vuejs/core/blob/6b6889852f247a91df4793ad37e8e2e1d27c79b3/packages/runtime-dom/src/apiCustomElement.ts#L224 it works as expected.
2
Jan 26th 2022
I think it's a duplicate of #5280.