Web Components Broken with 1.x Due to :root

[kbarnesMCC]

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version [1.0.2]
My browser is: Firefox
I am sure this issue is not a duplicate

Description

In the move to Bulma 1.x; it appears a handful of :root CSS selectors were added as part of the functionality.

Unfortunately, this has completely broken the ability to use Bulma as part of Web Components / ShadowDOM since stylesheets within this context don't respect :root (they use :host instead).

We're a big fan of Bulma due to it's exclusion of Javascript which helps us use it in an highly encapsulated manner allowing for our large disparate teams to work together without clashing on each other. In fact, the lack of reliance on :root is the reason we chose this over other frameworks (e.g. Bootstrap)...However, this change to tightly couple to the root breaks our encapsulation.

Are there any plans to reconcile this to keep Bulma flexible or do we need to either roll our own Bulma (maintenance costs for us) or begin looking into alternatives?

Steps to Reproduce

Download Bulma 1.x, investigate SASS files.

Expected behavior

Ideally, observer Bulma is NOT using :root for css selectors OR supports both :root and :host.

Actual behavior

Observe Bulma is now leveraging :root CSS selectors for core functionality.

[jgthms]

What would the solution look like? Using :host instead of :root?

[kbarnesMCC]

@jgthms I believe so; though I'm not quite sure how best to package the offering

In essence any HTML/CSS references within a ShadowDOM leverage :host as the "root" selector for the ShadowDOM boundary.

For example, ":host" would be referencing the "mcc-profile" elements ShadowDOM host; which would be the effective root of any DOM within this element. In other words, ":root" is not recognized and does not propagate beyond the boundary of "mcc-profile"; Bulma's CSS is actually loaded independently here (screenshot 2)

Alternatively, if there's a way to not use a selector like ":root" that may be better; I just don't know the underlying structure of bulma to assert if it's even possible. Here's a relevant stack overflow if it helps.

[gabor-kormany]

What would the solution look like? Using :host instead of :root?

Can you maybe make it customisable? Make it ':root' or maybe ':root, :host' as default, but leave the ability to have it defined in scss/sass. We're also intending to use it within a micro-frontends where we have scoped import like:

.scopeClass {
  @import 'bulma';
}

[gabor-kormany]

Opened a PR with the proposed fix: #3906

[gabor-kormany]

@jgthms ☝️