Vue
Unable to create simplest container custom element #9195
Replies: 3 comments
-
|
Hi, I have the same problem. Will the fallback text show for you? Did you find any solution for this? Thx |
Beta Was this translation helpful? Give feedback.
-
|
Not sure what the problem is in your scenario/code, this works fine: https://codepen.io/LinusBorg/pen/wvNpZMx 
|
Beta Was this translation helpful? Give feedback.
-
|
@LinusBorg I have to tell you I don't remember what the problem was. I just tried it as follows and it works just fine.. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
}
}
</script>
</head>
<body>
<custom-panel>
<input type="text">
</custom-panel>
<script type="module">
import { defineCustomElement } from 'vue'
const CustomPanel = {
template: '<div class="wrapper"><slot /></div>',
}
customElements.define('custom-panel', defineCustomElement(CustomPanel))
</script>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
-
I'm fighting this for a number of weeks now and I can't get it to work. I am trying to make a custom element using the
defineCustomElementfunction that has a default slot:Then I'm trying to use that component:
When I run this the slot isn't rendered at all and the input lands outside of the div, which is not present anymore.
Is there a simple example how to create containers using Vue.js and custom elements? What am I missing? Please help, I'm desperate enough to do anything possible to get it to work. I've tried named slots, default slot - nothing, literally nothing works.
Beta Was this translation helpful? Give feedback.
All reactions