Use `:host` in selectors to better support web components

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

update css variable selector from :root to :root,:host

Motivation and context

I want to use Bootstrap 5.x (currently 5.1.3) with a web component. Unfortunately, all the CSS variables defining color, font, etc are not pulled in because web components do not have a :root. I believe a web component’s counterpart to :root is :host (see mdn, here)

I’ll also point out I’m absolutely stealing this “fix” from font awesome

If I edit the bootstrap CSS by updating :root { ... } to :root,:host { ... } this corrects the issue.

Is this something that could be updated with Bootstrap to better support web components? I’d be happy to submit a PR.

[engenb]

for anyone else following along, I’m developing my web components with Vue3 and am able to work around this with the following added to my top-most component. would be great if this wasn’t necessary though!

<style lang="scss">
@import 'bootstrap';
:root, :host { @extend :root; }
</style>

[Lausselloic]

Here’s a sample of the issue with actual :root declaration : https://jsbin.com/zazedehola/5/edit?html,js,output Collapse is not well displayed due to shadow dom We need to embed the css inside the component at time : https://jsbin.com/kunonodiro/1/edit?html,js,output This can be avoid if :host is used and not only :root