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

Created by: engenb

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.