Below you will find many examples of how to accomplish various
layout and CSS-related tasks using ACSS. Take a look to see how
flexible and useful this library is.
We are using ACSS-Live with timings
enabled in order to see how long
various operations take. These metrics are also sent back to a
parent window (if one exists, like with the timings example) in
order to better report on statistics.
Bad Hover - Hover without parent selector will only change
text color when hovering over the text. Try hovering just
above or below this text.
Good Hover - Hover using a parent selector will change the
text color when hovering over the parent. Try hovering
anywhere over the white, including over the text.
This does not use a shadow root. Light gray outer
element. Inner element has a margin to show the light
gray from the parent, blue border, yellow background.
The message has a teal background.
This is an open shadow root. It should look the same as the
one on the left. The teal background and light gray come
from the light DOM's styles.
This is a closed shadow root. This should look the same
as the first.