Skip to content

fix: CSS back to <style> for Safari/cascade reasons#9908

Merged
maribethb merged 1 commit into
RaspberryPiFoundation:v13from
microbit-matt-hillsdon:simplify-web-component-support
May 20, 2026
Merged

fix: CSS back to <style> for Safari/cascade reasons#9908
maribethb merged 1 commit into
RaspberryPiFoundation:v13from
microbit-matt-hillsdon:simplify-web-component-support

Conversation

@microbit-matt-hillsdon
Copy link
Copy Markdown
Collaborator

@microbit-matt-hillsdon microbit-matt-hillsdon commented May 20, 2026

Reverts the storage mechanism introduced in #9611 (constructable stylesheets via adoptedStyleSheets) while keeping the per-root injection-site tracking that #9611 added for shadow-DOM support.

Motivations:

  • Safari 15.4 compatibility. new CSSStyleSheet() and adoptedStyleSheets require Safari 16.4+
  • Cascade order. adoptedStyleSheets apply after <style>/<link> elements in the document, so Blockly's defaults silently overrode host stylesheets. Prepending a <style> to the head (or to the shadow root) restores the pre-feat!: Allow using Blockly in web components/shadow DOM #9611 behavior where any author stylesheet declared later wins on specificity ties.

Trade-offs:

@gonfunko this is one possible take with the downsides noted above. Another option is to use both mechanisms (tag and adoptedStylesheets) either based on feature detection or based on the root. Then to fix the cascade issue consistently use "@layer blockly" for Blockly's CSS. That will require auditing of the !important use in Blockly as they would become impossible to override. If relying on feature detection note it is not sufficient to check for CSSStyleSheet being defined as that significantly predates constructable stylesheets.

Please feel free to make changes to this PR and/or replace it with one of your own.

The basics

I didn't format as it made a large unrelated diff whoops, I had outdated prettier, all good now.

The details

Resolves

Fixes #9876

Proposed Changes

Reason for Changes

Test Coverage

I checked the web component playground added in the previous PR.

Documentation

Additional Information

Reverts the storage mechanism introduced in RaspberryPiFoundation#9611 (constructable
stylesheets via `adoptedStyleSheets`) while keeping the per-root
injection-site tracking that RaspberryPiFoundation#9611 added for shadow-DOM support.

Motivations:

- Safari 15.4 compatibility. `new CSSStyleSheet()` and
  `adoptedStyleSheets` require Safari 16.4+
- Cascade order. `adoptedStyleSheets` apply after `<style>`/`<link>`
  elements in the document, so Blockly's defaults silently overrode
  host stylesheets. Prepending a `<style>` to the head (or to the
  shadow root) restores the pre-RaspberryPiFoundation#9611 behavior where any author
  stylesheet declared later wins on specificity ties.

Trade-offs:

- Per-shadow-root CSS text is duplicated rather than shared via a
  single adopted sheet object. Negligible for typical use.
- `Css.register()` calls made after the first `inject()` no longer
  reach already-injected roots (same as RaspberryPiFoundation#9611's behavior); subsequent
  `inject()` calls into other roots still pick them up. Web-component
  consumers can legitimately register late, so this is preferred to
  reinstating the pre-RaspberryPiFoundation#9611 throw.

Fixes RaspberryPiFoundation#9876
Copy link
Copy Markdown
Contributor

@gonfunko gonfunko left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for putting this together, looks reasonable to me but I'll let Maribeth have a look before merging.

Copy link
Copy Markdown
Contributor

@gonfunko gonfunko left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for putting this together, looks reasonable to me but I'll let Maribeth have a look before merging.

@maribethb maribethb merged commit 6a6871e into RaspberryPiFoundation:v13 May 20, 2026
14 of 15 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

PR: fix Fixes a bug

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants