Support for Web Components / Shadow DOM

[graphographer]

Hi there! I recently used Pico CSS on a contract job and it was overall a very nice experience.

However, as I was using web components and shadow DOM, I had to do some minor surgery to the SCSS source to get it to work properly. This simply meant replacing references to :root with :host. This specifically had to happen in common-styles.scss and document.scss.

Perhaps you could replace hard-coded instances of :root with a variable, similar to $semantic-root-element? or simply add to the selector, :root, :host.

There may be edge-case subtleties here so I'd love to participate in discussions about this.

[lukaszkaleta]

Hi
I also wish better support for web components.
Here it how today pico css look like when directly imported into web component:

Pico Example with Web Component

[rcoup]

I made a PR to effect this change #641