breaking: preserve slots inside templates with a shadowrootmode attribute (#10721)

closes #10641
pull/10727/head
Simon H 2 years ago committed by GitHub
parent cc22492e7a
commit 3fd02f1c49
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
"svelte": patch
---
breaking: preserve slots inside templates with a shadowrootmode attribute

@ -51,6 +51,23 @@ function parent_is_head(stack) {
return false;
}
/** @param {import('#compiler').TemplateNode[]} stack */
function parent_is_shadowroot_template(stack) {
// https://developer.chrome.com/docs/css-ui/declarative-shadow-dom#building_a_declarative_shadow_root
let i = stack.length;
while (i--) {
if (
stack[i].type === 'RegularElement' &&
/** @type {import('#compiler').RegularElement} */ (stack[i]).attributes.some(
(a) => a.type === 'Attribute' && a.name === 'shadowrootmode'
)
) {
return true;
}
}
return false;
}
const regex_closing_textarea_tag = /^<\/textarea(\s[^>]*)?>/i;
const regex_closing_comment = /-->/;
const regex_capital_letter = /[A-Z]/;
@ -112,7 +129,8 @@ export default function tag(parser) {
? 'Component'
: name === 'title' && parent_is_head(parser.stack)
? 'TitleElement'
: name === 'slot'
: // TODO Svelte 6/7: once slots are removed in favor of snippets, always keep slot as a regular element
name === 'slot' && !parent_is_shadowroot_template(parser.stack)
? 'SlotElement'
: 'RegularElement';

@ -0,0 +1,7 @@
<template shadowrootmode="open">
<p><slot></slot></p>
</template>
<template>
<p><slot></slot></p>
</template>
<slot></slot>

@ -0,0 +1,160 @@
{
"css": null,
"js": [],
"start": 0,
"end": 125,
"type": "Root",
"fragment": {
"type": "Fragment",
"nodes": [
{
"type": "RegularElement",
"start": 0,
"end": 66,
"name": "template",
"attributes": [
{
"type": "Attribute",
"start": 10,
"end": 31,
"name": "shadowrootmode",
"value": [
{
"start": 26,
"end": 30,
"type": "Text",
"raw": "open",
"data": "open"
}
]
}
],
"fragment": {
"type": "Fragment",
"nodes": [
{
"type": "Text",
"start": 32,
"end": 34,
"raw": "\n\t",
"data": "\n\t"
},
{
"type": "RegularElement",
"start": 34,
"end": 54,
"name": "p",
"attributes": [],
"fragment": {
"type": "Fragment",
"nodes": [
{
"type": "RegularElement",
"start": 37,
"end": 50,
"name": "slot",
"attributes": [],
"fragment": {
"type": "Fragment",
"nodes": [],
"transparent": true
}
}
],
"transparent": true
}
},
{
"type": "Text",
"start": 54,
"end": 55,
"raw": "\n",
"data": "\n"
}
],
"transparent": true
}
},
{
"type": "Text",
"start": 66,
"end": 67,
"raw": "\n",
"data": "\n"
},
{
"type": "RegularElement",
"start": 67,
"end": 111,
"name": "template",
"attributes": [],
"fragment": {
"type": "Fragment",
"nodes": [
{
"type": "Text",
"start": 77,
"end": 79,
"raw": "\n\t",
"data": "\n\t"
},
{
"type": "RegularElement",
"start": 79,
"end": 99,
"name": "p",
"attributes": [],
"fragment": {
"type": "Fragment",
"nodes": [
{
"type": "SlotElement",
"start": 82,
"end": 95,
"name": "slot",
"attributes": [],
"fragment": {
"type": "Fragment",
"nodes": [],
"transparent": true
}
}
],
"transparent": true
}
},
{
"type": "Text",
"start": 99,
"end": 100,
"raw": "\n",
"data": "\n"
}
],
"transparent": true
}
},
{
"type": "Text",
"start": 111,
"end": 112,
"raw": "\n",
"data": "\n"
},
{
"type": "SlotElement",
"start": 112,
"end": 125,
"name": "slot",
"attributes": [],
"fragment": {
"type": "Fragment",
"nodes": [],
"transparent": true
}
}
],
"transparent": false
},
"options": null
}
Loading…
Cancel
Save