Fixes #36688
Description
This PR suggests to change :root
to :root, :host
in order to have access to the CSS vars in this type of example shown in the issue where the <link>
is in the web component definition but not loaded in the main document.
So I've added this extra-rule to the following files:
-
scss/_grid.scss
(tested in the CodePen viaheight: var(--bs-breakpoint-sm)
) -
scss/_reboot.scss
:⚠ ️ not sur if it's really needed or not🤔 -
scss/_root.scss
(tested in the CodePen viacolor: var(--bs-white); background-color: var(--bs-purple);
) -
scss/mixins/_color-mode.scss
:⚠ ️ not easily testable
On purpose, I haven't modified the following files only used for our docs. I assumed that it wasn't really useful for our users.
site/assets/scss/_search.scss
site/assets/scss/_syntax.scss
site/assets/scss/_variables.scss
- Important This PR doesn't tackle the sub-issue regarding the rendering of the accordions from https://github.com/twbs/bootstrap/issues/36688#issuecomment-1177361155. IMO it's not exactly the same topic.
Testing
I've duplicated the example from the comments.
Due to CORS issues and/or netlify deployment errors, I've copied the content of dist/css/bootstrap.min.css
directly in the <style>
of the web component to show that the fix work.
If you change it to <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
you'll see the non-working example.
Other elements
-
Add something in the Migration Guide for v5.3? -
reboot.md
,color.md
,css-variables.md
,focus-ring.md
andpartials/home/css-variables.html
mention the:root
level. Do we need to modify the texts to mention the:root, :host
level? Might be weird.