msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

breaking: use <span> instead of <div> for style props

Browse Source
pull/13499/head
Dominic Gannaway 2 years ago
parent 7d47269fc2
commit 00d0b3fddc
13 changed files with 74 additions and 63 deletions
Show Stats Download Patch File Download Diff File

5
.changeset/tasty-spies-sniff.md
Unescape View File

@ -0,0 +1,5 @@
---
'svelte': patch
---
breaking: use <span> instead of <div> for style props

2
packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
Unescape View File

@ -362,7 +362,7 @@ export function build_component(node, component_name, context, anchor = context.
context.state.template.push(
context.state.metadata.namespace === 'svg'
? '<g><!></g>'
: '<div style="display: contents"><!></div>'
: '<span style="display: contents"><!></span>'
);
statements.push(

4
packages/svelte/src/internal/server/index.js
Unescape View File

@ -186,7 +186,7 @@ export function css_props(payload, is_html, props, component, dynamic = false) {
const styles = style_object_to_string(props);
if (is_html) {
payload.out += `<div style="display: contents; ${styles}">`;
payload.out += `<span style="display: contents; ${styles}">`;
} else {
payload.out += `<g style="${styles}">`;
}
@ -198,7 +198,7 @@ export function css_props(payload, is_html, props, component, dynamic = false) {
component();
if (is_html) {
payload.out += `<!----></div>`;
payload.out += `<!----></span>`;
} else {
payload.out += `<!----></g>`;
}

16
packages/svelte/tests/runtime-browser/samples/component-css-custom-properties-dynamic/_config.js
Unescape View File

@ -8,18 +8,18 @@ export default test({
trackColor2: 'blue'
},
html: `
<div style="display: contents; --rail-color: black; --track-color: red;">
<span style="display: contents; --rail-color: black; --track-color: red;">
<div id="slider-1">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
<div style="display: contents; --rail-color: green; --track-color: blue;">
</span>
<span style="display: contents; --rail-color: green; --track-color: blue;">
<div id="slider-2">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
</span>
`,
test({ component, assert, target }) {
component.railColor1 = 'yellow';
@ -28,18 +28,18 @@ export default test({
assert.htmlEqual(
target.innerHTML,
`
<div style="display: contents; --rail-color: yellow; --track-color: red;">
<span style="display: contents; --rail-color: yellow; --track-color: red;">
<div id="slider-1">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
<div style="display: contents; --rail-color: green; --track-color: orange;">
</span>
<span style="display: contents; --rail-color: green; --track-color: orange;">
<div id="slider-2">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
</span>
`
);
}

8
packages/svelte/tests/runtime-browser/samples/component-css-custom-properties/_config.js
Unescape View File

@ -2,18 +2,18 @@ import { test, assert_ok } from '../../assert';
export default test({
html: `
<div style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
<span style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
<div id="slider-1">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
<div style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
</span>
<span style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
<div id="slider-2">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
</span>
`,
test({ target, window, assert }) {
const rail_color1 = target.querySelector('#slider-1 p');

16
packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties-dynamic/_config.js
Unescape View File

@ -8,18 +8,18 @@ export default test({
trackColor2: 'blue'
},
html: `
<div style="display: contents; --rail-color: black; --track-color: red;">
<span style="display: contents; --rail-color: black; --track-color: red;">
<div id="slider-1">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
<div style="display: contents; --rail-color: green; --track-color: blue;">
</span>
<span style="display: contents; --rail-color: green; --track-color: blue;">
<div id="slider-2">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
</span>
`,
test({ component, assert, target }) {
component.railColor1 = 'yellow';
@ -28,18 +28,18 @@ export default test({
assert.htmlEqual(
target.innerHTML,
`
<div style="display: contents; --rail-color: yellow; --track-color: red;">
<span style="display: contents; --rail-color: yellow; --track-color: red;">
<div id="slider-1">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
<div style="display: contents; --rail-color: green; --track-color: orange;">
</span>
<span style="display: contents; --rail-color: green; --track-color: orange;">
<div id="slider-2">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
</span>
`
);
}

8
packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties/_config.js
Unescape View File

@ -5,18 +5,18 @@ export default test({
componentName: /** @type {string | undefined} */ ('Slider1')
},
html: `
<div style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
<span style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
<div id="component1">
<p class="svelte-17ay6rc">Slider1</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
<div style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
</span>
<span style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
<div id="component2">
<p class="svelte-17ay6rc">Slider1</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
</span>
`,
test({ target, window, assert, component }) {
function assert_slider_1() {

8
packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties2/_config.js
Unescape View File

@ -6,18 +6,18 @@ export default test({
},
html: `
<section>
<div style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
<span style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
<div id="component1">
<p class="svelte-17ay6rc">Slider1</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
<div style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
</span>
<span style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
<div id="component2">
<p class="svelte-17ay6rc">Slider1</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
</span>
</section>
`,
test({ target, window, assert, component }) {

32
packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties-dynamic/_config.js
Unescape View File

@ -12,30 +12,30 @@ export default test({
nestTrackColor2: 'pink'
},
html: `
<div style="display: contents; --rail-color: black; --track-color: red;">
<span style="display: contents; --rail-color: black; --track-color: red;">
<div id="slider-1">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
<div style="display: contents; --rail-color: white; --track-color: gray;">
<span style="display: contents; --rail-color: white; --track-color: gray;">
<div id="nest-slider-1">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
</div>
<div style="display: contents; --rail-color: green; --track-color: blue;">
</span>
</span>
<span style="display: contents; --rail-color: green; --track-color: blue;">
<div id="slider-2">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
<div style="display: contents; --rail-color: aqua; --track-color: pink;">
<span style="display: contents; --rail-color: aqua; --track-color: pink;">
<div id="nest-slider-2">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
</div>
</span>
</span>
`,
test({ component, assert, target }) {
component.railColor1 = 'yellow';
@ -46,30 +46,30 @@ export default test({
assert.htmlEqual(
target.innerHTML,
`
<div style="display: contents; --rail-color:yellow; --track-color:red;">
<span style="display: contents; --rail-color:yellow; --track-color:red;">
<div id="slider-1">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
<div style="display: contents; --rail-color:lime; --track-color:gray;">
<span style="display: contents; --rail-color:lime; --track-color:gray;">
<div id="nest-slider-1">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
</div>
<div style="display: contents; --rail-color:green; --track-color:orange;">
</span>
</span>
<span style="display: contents; --rail-color:green; --track-color:orange;">
<div id="slider-2">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
<div style="display: contents; --rail-color:aqua; --track-color:gold;">
<span style="display: contents; --rail-color:aqua; --track-color:gold;">
<div id="nest-slider-2">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
</div>
</span>
</span>
`
);
}

15
packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties/_config.js
Unescape View File

@ -3,25 +3,26 @@ import { assert_ok, test } from '../../assert';
export default test({
props: {},
html: `
<div style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
<span style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
<div id="component1">
<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
</div>
<div style="display: contents; --rail-color: rgb(255, 255, 0); --track-color: rgb(255, 0, 255);">
<span style="display: contents; --rail-color: rgb(255, 255, 0); --track-color: rgb(255, 0, 255);">
<div id="nest-component1">
<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span></div>
</div>
</div>
<div style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
</span>
</span>
<span style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
<div id="component2">
<p class="svelte-q538ga">Slider2</p><span class="svelte-q538ga">Track</span>
</div>
<div style="display: contents; --rail-color: rgb(0, 255, 255); --track-color: rgb(255, 255, 255);">
<span style="display: contents; --rail-color: rgb(0, 255, 255); --track-color: rgb(255, 255, 255);">
<div id="nest-component2">
<p class="svelte-q538ga">Slider2</p><span class="svelte-q538ga">Track</span>
</div>
</div>
</div>
</span>
</span>
`,
test({ target, window, assert }) {
const rail_color1 = target.querySelector('#component1 p');

15
packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties2/_config.js
Unescape View File

@ -5,25 +5,26 @@ export default test({
componentName: /** @type {string | undefined} */ ('Slider1')
},
html: `
<div style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
<span style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
<div id="component1">
<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
</div>
<div style="display: contents; --rail-color: rgb(255, 255, 0); --track-color: rgb(255, 0, 255);">
<span style="display: contents; --rail-color: rgb(255, 255, 0); --track-color: rgb(255, 0, 255);">
<div id="nest-component1">
<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span></div>
</div>
</div>
<div style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
</span>
</span>
<span style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
<div id="component2">
<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
</div>
<div style="display: contents; --rail-color: rgb(255, 255, 0); --track-color: rgb(255, 0, 255);">
<span style="display: contents; --rail-color: rgb(255, 255, 0); --track-color: rgb(255, 0, 255);">
<div id="nest-component2">
<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
</div>
</div>
</div>
</span>
</span>
`,
test({ target, window, assert, component }) {
function assert_slider_1() {

4
packages/svelte/tests/runtime-legacy/samples/css-vars-escape/_config.js
Unescape View File

@ -2,8 +2,8 @@ import { test } from '../../test';
export default test({
html: `
<div style="display: contents; --color: &quot; onload=&quot;alert('uhoh')&quot; data-nothing=&quot;not important;">
<span style="display: contents; --color: &quot; onload=&quot;alert('uhoh')&quot; data-nothing=&quot;not important;">
<div class="svelte-271qee">hi</div>
</div>
</span>
`
});

4
sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
Unescape View File

@ -429,4 +429,8 @@ Svelte 5 makes use of comments during server side rendering which are used for m
Event attributes replace event directives: Instead of `on:click={handler}` you write `onclick={handler}`. For backwards compatibility the `on:event` syntax is still supported and behaves the same as in Svelte 4. Some of the `onevent` attributes however are delegated, which means you need to take care to not stop event propagation on those manually, as they then might never reach the listener for this event type at the root.
### `--style-props` uses a different element
Svelte 5 uses an extra `<span>` element instead of a `<div>` to wrap the component when using CSS custom properties.
<!-- TODO in final docs, add link to corresponding section for more details -->

Write Preview
Loading…
Cancel
Save