webc icon indicating copy to clipboard operation
webc copied to clipboard

Declarative shadow DOM template is rendering inside of itself

Open bennypowers opened this issue 1 year ago • 0 comments

I'm trying to use the web standard declarative shadow dom to render my component. I'd like the slotted content not to be compiled away, but would live with compiler magic if the page would at least print. but instead, slotted content isn't rendering to the page, instead, It's printing to a triple-nested template (see below)

_components/inline-notification.webc

<template shadowroot="open" shadowrootmode="open">
  <style>/*...*/</style>
  <h3 @text="title ?? type"></h3>
  <slot id="content"></slot>
</template>

some-page.webc.md

<inline-notification type="tip">

This page is a HOW-TO guide. For detailed docs on the `ApolloQuery` interface 
see the [API docs](/api/core/interfaces/query/)

</inline-notification>

EXPECTED:

<inline-notification type="tip">
  <template shadowroot="open" shadowrootmode="open">
    <style>
    </style>
    <slot></slot>
  </template>
  <p>This page is a HOW-TO guide. For detailed docs on the <code>ApolloQuery</code> interface see the <a href="/api/core/interfaces/query/">API docs</a></p>
</inline-notification>

ACTUAL html:

<inline-notification type="tip">
<template shadowroot="open" shadowrootmode="open">
  <style>
  </style>
  
<template shadowroot="open" shadowrootmode="open">
  <style>
  </style>
  
<template shadowroot="open" shadowrootmode="open">
  <style>
  </style>
<p>This page is a HOW-TO guide. For detailed docs on the <code>ApolloQuery</code> interface
see the <a href="/api/core/interfaces/query/">API docs</a></p>
</template>

</template>

</template>
</inline-notification>

I've tried many combinations of slot, nokeep, keep, raw, template, etc, nothing seems to work.

bennypowers avatar Jun 18 '23 20:06 bennypowers