Use `:host` in selectors to support Web Components

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/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 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.