Support to "Shadow DOM"

[mauromascarenhas]

Proposed changes

Made "CSS" variables compatible with custom elements (shadow dom).

This PR aims to close #329.

Screenshots (if appropriate) or codepen:

It is possible to check the current behaviour in this pen provided at #329.

With this "fix", the inputs should render correcly:

Types of changes

• Bug fix (non-breaking change which fixes an issue).
• New feature (non-breaking change which adds functionality).
• Breaking change (fix or feature that would cause existing functionality to change).

Checklist:

• I have read the CONTRIBUTING document.
• My commit messages follows the conventional commit format
• My change requires a change to the documentation, and updated it accordingly.
• I have added tests to cover my changes.
• All new and existing tests passed.

[wuda-io]

Ok this is nice, but I think it is more like a workaround. What is the best practice here?

https://stackoverflow.com/questions/48380267/css-variables-root-vs-host
Probably we should avoid the use of the root-selector completely.

[mauromascarenhas]

Ok this is nice, but I think it is more like a workaround. What is the best practice here?

https://stackoverflow.com/questions/48380267/css-variables-root-vs-host Probably we should avoid the use of the root-selector completely.

I could not find anywhere else that using :root selector is a bad practice (at least, not a terrible one)...

This probably happens due to the context of application, like the one in the question (eg.: implementing stylesheets for Angular components).

I've found an article which presents other forms of declarations for CSS variables, but it still makes use of ":root" for some purposes. Not to mention the example of Bootstrap, which also makes use of it (see the screenshot below).

The problem actually lies in the fact that the code may become realy messy in the long term when everthing is defined under "root". But that should not be a problem for us, since we use a dedicated file for that (_variables.scss) 😄.