breaking: use <svelte-css-wrapper> instead of <div> for style props

[trueadm]

Fixes #13490. This is a breaking change, so I've also documented the change too.

[changeset-bot]

🦋 Changeset detected

Latest commit: b318f87

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
svelte	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[fcrozatier]

What about <H1 --color="blue" /> or <Article --color="blue" /> where we will have heading or sectionning content inside a span (which has phrasing content model)?

[trueadm]

Yeah, we're going to have to use another element it seems.

[dummdidumm]

sounds like we need to use a bogus custom element like svelte-css-wrapper or sth, which hopefully can appear anywhere?

[trueadm]

Actually hold on, it seems that <span> can wrap <h1> just fine. It's just that I had a <p> element around it all that was causing the issue. Interestingly though, the <span> does cause the invalidation to not work right, whilst using a custom element does. So I'll switch to that.

[ottomated]

The name feels a bit clunky, is there something shorter that could work?

[trueadm]

it could be a random name like <svelte-abc> where abc is a 3 letter random lowercase character string.

[dummdidumm]

The more characters the less chance of accidentally using an actual custom element. I'm not sure if aesthetics really matter here.

[Conduitry]

The reason that this is a breaking change is that someone could (misguidedly) be using the existing <div> in some CSS selector. If we make the element name be randomized, that would make that sort of thing a lot harder to do, and I can't decide whether that means it would be a good idea or a bad idea to do.

[ottomated]

Could it be called <svelte-hash> where the hash is the same that would be used for css classes in the component?

[trueadm]

Could it be called <svelte-hash> where the hash is the same that would be used for css classes in the component?

No that contains invalid element tag characters