11ty / webc

Single File Web Components
MIT License
1.3k stars 36 forks source link

Declarative shadow DOM template is rendering inside of itself #185

Open bennypowers opened 1 year ago

bennypowers commented 1 year ago

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.