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.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
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