bootstrap icon indicating copy to clipboard operation
bootstrap copied to clipboard
verified publisher icon twbs

Use `:host` in selectors to support Web Components

Open julien-deramond opened this issue 3 years ago • 3 comments

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 via height: var(--bs-breakpoint-sm))
  • scss/_reboot.scss: ⚠️ not sur if it's really needed or not 🤔
  • scss/_root.scss (tested in the CodePen via color: 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/[email protected]/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 and partials/home/css-variables.html mention the :root level. Do we need to modify the texts to mention the :root, :host level? Might be weird.

julien-deramond avatar Sep 16 '22 16:09 julien-deramond

Still in draft mode but I'd love to have your thoughts @twbs/css-review regarding the modifications and the remaining questions in the description.

julien-deramond avatar Feb 08 '23 20:02 julien-deramond

Maybe you should also update the bodyselector in the reboot.scss file to also apply corresponding style to :host. Style would be consistent with custom properties values. But maybe it's better to inherit those style from the main document.

vprothais avatar Feb 13 '23 16:02 vprothais

Why hasn't this merged yet?

AndreasMietk avatar Aug 02 '24 12:08 AndreasMietk