Document style props (passing CSS custom properties to components)

[benmccann]

#6237 implemented the RFC for adding style props and was released in 3.38.0. This change allows passing CSS custom properties to components for use cases such as theming.

The RFC says:

It would require a new tutorial chapter and updated documentation.

[swyxio]

made an attempt here #6378

[milkbump]

Add a warning that this feature breaks accessibility. All children of a component with display: contents are removed from the Accessibility Tree due to wrong implementation in all three browsers/rendering engines.

See links at MDN#display: contents for accessibility concerns. Summary:

• Firefox 61 introduced this bug. Fixed in Firefox 62 in August 2018.
• Chrome 66 fixed introduced the bug. Fix in Chome 89 in March 2021
• Safari is still broken.

TL;DR if you care about accessibility and supporting Safari and pre-March-2021 Chrome do not use the <Component --var/> feature.

[geoffrich]

Add a warning that this feature breaks accessibility. All children of a component with display: contents are removed from the Accessibility Tree due to wrong implementation in all three browsers/rendering engines.

@kwangure I don't think that's accurate. My understanding of the accessibility bug is that an element with display: contents and an accessible role (e.g. list) had its role removed. So applying display: contents to a <ul> used to prevent a screen reader from identifying it as a list, but the children of the list were still read out to screen readers.

From the MDN doc you linked (emphasis mine):

Current implementations in most browsers will remove from the accessibility tree any element with a display value of contents (but descendants will remain).

So I don't think it's true that the children of an element with display: contents would have been removed from the accessibility tree -- it only affected the parent element's role.

The Svelte <Component --var> feature would not be affected by this accessibility bug, because display: contents is applied to a wrapping <div>. <div>s don't have any additional semantic meaning, so there is no role to remove.

[milkbump]

I think you're right! I failed to note both things. 1) Only semantic elements such as <select>, <ul>, <nav> etc. are announced by readers. 2) I missed the parenthesized note that "...descendants will remain". Oops!

[benaltair]

It would be great to see more on this - I'm happy to help draft documentation if needed, just @ me. Are there reasons why we're holding back on documenting this feature for now?

Also this statement stands on its own

• Safari is still broken.