Skip to content

feat(global-styles): new addGlobalStyleToComponents extras option. Opt-out of new globalStyle behaviour#6292

Merged
christian-bromann merged 1 commit intomainfrom
feat-addGlobalStyleToComponents
Jun 13, 2025
Merged

feat(global-styles): new addGlobalStyleToComponents extras option. Opt-out of new globalStyle behaviour#6292
christian-bromann merged 1 commit intomainfrom
feat-addGlobalStyleToComponents

Conversation

@johnjenkins
Copy link
Copy Markdown
Contributor

@johnjenkins johnjenkins commented Jun 11, 2025

What is the current behavior?

The new behaviour added via #6268 is probably desirable for a lot of users and use-cases; sharing globalStyle across all components.
For some users however, this new behaviour might be undesirable if (for example):

  • They have designed their globalStyles around the lightDOM alone. For them, adding such a stylesheet to all components is completely unnecessary. An example might be globalStyles in a design-system that seek to control the marriage of potential components: doing something like my-menu > my-link-item::part(icon) is not an option via traditional ::slotted(...) selectors atm
  • They are using their components during SSR. The nature of declarative-shadow-dom for SSR being declarative (😄) means that a potentially large globalStyle sheet will be added to every component as part of a server's payload is (this is not a solved issue atm)

GitHub Issue Number: N/A

What is the new behavior?

An escape hatch for users wanting to opt-out of the behaviour:

config.extras.addGlobalStyleToComponents which defaults to true

Documentation

stenciljs/site#1532

Does this introduce a breaking change?

  • Yes
  • No

Testing

Other information

…ig option to "opt-out" of new globalStyle behaviour
@johnjenkins johnjenkins requested a review from a team as a code owner June 11, 2025 22:46
@johnjenkins
Copy link
Copy Markdown
Contributor Author

@christian-bromann lemme know if you think this config option's name / location / default etc makes sense to you.

Copy link
Copy Markdown
Member

@christian-bromann christian-bromann left a comment

Choose a reason for hiding this comment

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

Makes sense to me, mind adding a PR to the docs to include it here: https://stenciljs.com/docs/config-extras

@johnjenkins
Copy link
Copy Markdown
Contributor Author

done 🙂
stenciljs/site#1532

Copy link
Copy Markdown
Member

@christian-bromann christian-bromann left a comment

Choose a reason for hiding this comment

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

LGTM 👍

@johnjenkins johnjenkins added this pull request to the merge queue Jun 12, 2025
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to no response for status checks Jun 12, 2025
@johnjenkins johnjenkins added this pull request to the merge queue Jun 12, 2025
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to no response for status checks Jun 12, 2025
christian-bromann added a commit to stenciljs/site that referenced this pull request Jun 13, 2025
* Update extras.md

* Update extras.md

* Update extras.md

* Update extras.md

* Update styling.md

* Update extras.md

* we invented the language!

* we invented the language!

* Update versioned_docs/version-v4.33/components/styling.md

* Update versioned_docs/version-v4.33/components/styling.md

* Update styling.md

* Update styling.md

* Update extras.md

* Update extras.md

* Update extras.md

* Update styling.md

* Update styling.md

* Update styling.md

---------

Co-authored-by: Christian Bromann <git@bromann.dev>
@christian-bromann christian-bromann merged commit cd9778a into main Jun 13, 2025
72 checks passed
@christian-bromann christian-bromann deleted the feat-addGlobalStyleToComponents branch June 13, 2025 00:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants