webc
webc copied to clipboard
Declarative shadow DOM template is rendering inside of itself
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.