Scoping

Stylable scope enables you to wrap several style-rules using a single directive.
The scoping directive receives a single simple selector (Tag selector, Class selector or Component root) to use for its scoping.

Stylable scoping directive is similar in its behavior to CSS nesting, but can only be applied to a single level.

Syntax example

/* entry.st.css */@st-scope.root{input{color:purple;}}

/* output */.entry--rootinput{color:purple;}

Theming with scope

There are many possible patterns that can be used to theme a site or application in CSS. Stylable scoping capability serves as syntax sugar to allow an easier theme implementation.

Below are several examples for how theming can be done.

Creating a theme

In this example, we’re representing a dark theme as a stylesheet. Creating your overriding rules under that Stylesheet’s symbol and apply it to the relevant part of your DOM.

In this theme implementation we are targeting three components and overriding their default look.