-
-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Open
Description
Describe the bug
Declarative Shadow DOM doesn't work in Svelte. According to MDN, you can declare a shadow dom with a <template>
tag and with the shadowrootmode
attribute having a value of either open
or closed
but the <template>
tag from svelte doesn't get replaced with #shadow-root (open)
. Therefore, the content inside the <template>
is not rendered in the browser.
"In such cases, you can use the element to declaratively define the shadow DOM. The key to this behavior is the enumerated shadowrootmode attribute, which can be set to either open or closed, the same values as the mode option of attachShadow() method." -- MDN
Reproduction
The code:
<div id="host">
<template shadowrootmode="open">
<span>I'm in the shadow DOM</span>
</template>
</div>
Outputs:
<div id="host">
<template shadowrootmode="open">
#document-fragment
<span>I'm in the shadow DOM</span>
</template>
</div>
Logs
No response
System Info
System:
OS: macOS 14.6.1
CPU: (8) arm64 Apple M1
Memory: 489.16 MB / 8.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node
Yarn: 1.22.22 - ~/.nvm/versions/node/v20.16.0/bin/yarn
npm: 10.8.1 - ~/.nvm/versions/node/v20.16.0/bin/npm
pnpm: 9.9.0 - /opt/homebrew/bin/pnpm
Browsers:
Chrome: 128.0.6613.138
Safari: 17.6
npmPackages:
svelte: ^4.2.0 => 4.2.19
Severity
annoyance
benbucksch and eleith
Metadata
Metadata
Assignees
Labels
No labels