Skip to content

Declarative shadow DOM template is rendering inside of itself #185

@bennypowers

Description

@bennypowers

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions