Skip to content

Access $slots programmatic in customElement #6142

Closed
@Leechael

Description

@Leechael

What problem does this feature solve?

I'm trying build custom element in Vue.js and expose as web component. As I exploring what I can do with it. Everything is good but when I'm trying access $slots programmatic, it returns undefined.

It may expensive operation convert that to VNode and returns (not sure that), but returns as DOM Element is okay I think.

What does the proposed API look like?

Let's said we create this component first and name Hello.ce.vue:

<script setup>
import { useSlots } from 'vue';
const slots = useSlots()
console.log("setup: ", slots.default)
</script>

<script>
export default {
  created() {
    console.log('created: ', this.$slots.default)
  },

  mounted() {
    console.log('mounted: ', this.$slots.default)
  },
}
</script>

<template>
  <div>
    <h1>What in slots</h1>
    <slot></slot>
  </div>
</template>

Define the custom element in app.js:

import { defineCustomElement } from 'vue';
import Hello from './Hello.ce.vue';

customElements.define('x-hello', defineCustomElement(Hello));

Than add to HTML:

<x-hello>User Defined Text</x-hello>

We can see for each stage, accessing slots will give undefined.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions