Repository: vuejs/vue-next
File: packages/runtime-dom/__tests__/customElement.spec.ts (TypeScript)

Code before:
        `<my-el-parent-shadow-false data-v-app=""><!----></my-el-parent-shadow-false>`,
      )

      isShown.value = true
      await nextTick()
      expect(container.innerHTML).toBe(
        `<my-el-parent-shadow-false data-v-app="" is-shown="">` +
          `<div>` +
          `<my-el-child-shadow-false data-v-app="">` +
          `<div>child</div>` +
          `</my-el-child-shadow-false>` +
          `</div>` +
          `</my-el-parent-shadow-false>`,
      )
    })
  })

  describe('helpers', () => {
    test('useHost', () => {
      const Foo = defineCustomElement({
        setup() {
          const host = useHost()!
          host.setAttribute('id', 'host')
          return () => h('div', 'hello')
        },
      })
      customElements.define('my-el-use-host', Foo)
      container.innerHTML = `<my-el-use-host>`
      const el = container.childNodes[0] as VueElement
      expect(el.id).toBe('host')
    })

    test('useShadowRoot for style injection', () => {
      const Foo = defineCustomElement({
        setup() {
          const root = useShadowRoot()!
          const style = document.createElement('style')
          style.innerHTML = `div { color: red; }`
          root.appendChild(style)
          return () => h('div', 'hello')
        },
      })
      customElements.define('my-el-use-shadow-root', Foo)
      container.innerHTML = `<my-el-use-shadow-root>`
      const el = container.childNodes[0] as VueElement
      const style = el.shadowRoot?.querySelector('style')!
      expect(style.textContent).toBe(`div { color: red; }`)
    })
  })

  describe('expose', () => {

Review comment (suggestion):
Hi @edison1105 , thanks for the fix, it works fine in our app as well!

I'm not sure if it is related to the current issue or I need to create a separate one, but If in custom element slot we have a `v-if` clause, then it never renders even if the clause is true, but if it's `v-show` - it works fine.

Code after:
            return renderSlot(this.$slots, 'default')
          },
        },
        { shadowRoot: false },
      )
      customElements.define('my-el-teleport-parent', Parent)

      const App = {
        render() {
          return h('my-el-teleport-parent', null, {
            default: () => [
              h('my-el-teleport-child', null, {
                default: () => [h('span', null, 'default')],
              }),
            ],
          })
        },
      }
      const app = createApp(App)
      app.mount(container)
      await nextTick()
      expect(target.innerHTML).toBe(`<span>default</span>`)
      app.unmount()
    })

    test('toggle nested custom element with shadowRoot: false', async () => {
      customElements.define(
        'my-el-child-shadow-false',
        defineCustomElement(
          {
            render(ctx: any) {
              return h('div', null, [renderSlot(ctx.$slots, 'default')])
            },
          },
          { shadowRoot: false },
        ),
      )
      const ChildWrapper = {
        render() {
          return h('my-el-child-shadow-false', null, 'child')
        },
      }

      customElements.define(
        'my-el-parent-shadow-false',
        defineCustomElement(
          {
            props: {
              isShown: { type: Boolean, required: true },
            },
            render(ctx: any, _: any, $props: any) {