Skip to content

mergeStyles: initial shadow DOM support#28894

Closed
spmonahan wants to merge 15 commits intomicrosoft:shadow-domfrom
spmonahan:shadow-dom/merge-styles
Closed

mergeStyles: initial shadow DOM support#28894
spmonahan wants to merge 15 commits intomicrosoft:shadow-domfrom
spmonahan:shadow-dom/merge-styles

Conversation

@spmonahan
Copy link
Contributor

@spmonahan spmonahan commented Aug 17, 2023

Look at #28906 instead

NOTE: this feature is being merged into a non-master branch as it's not yet ready for stable release but we want to be able to stick with a more or less typical PR workflow.

Previous Behavior

mergeStyles did not work with shadow DOM or constructable stylesheets.

New Behavior

mergeStyles now, optionally, support shadow DOM and constructable stylesheets.

This is missing many tests but I want to get it up for feedback.

Related Issue(s)

@spmonahan spmonahan requested review from a team, dzearing and khmakoto as code owners August 17, 2023 00:16
@github-actions github-actions bot added this to the August Project Cycle Q4 2023 milestone Aug 17, 2023
labelPosition,
className,
},
shadowDom,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Unfortunately it looks like we'll have to plumb this value through all components. Would love ideas to avoid this!

@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 17, 2023

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 371cd18:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@spmonahan
Copy link
Contributor Author

/azp run

@azure-pipelines
Copy link

Azure Pipelines could not run because the pipeline triggers exclude this branch/path.

* chore: fix lint warnings for @fluentui/react-components

* chore: fix lint warnings
Resolves all lints warnings for @fluentui/react package.
NOTE: this is stil a work in progress.

- Refactors Stylesheet.ts to support shadow DOM
- Adds React context and hooks for opting in to
  shadow DOM
- Adds an API for projecting styles to child windows.
- Refactors stylesheet shadow DOM implementation a bit.
- Adds a new docs page.
- Fixes various Typescript errors
- Adds APIs to better encapsulate shadow DOM features
@spmonahan
Copy link
Contributor Author

Closing because of a naming conflict with another branch

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.

7 participants