Styling Web Components with Fstyle

Immediately below this paragraph, you should see an animated progress bar. Dragging the slider left or right changes the amount of progress.

This little demonstration is implemented using Web Components and Fstyle. Its purpose is to show how Fstyle can be used to style Web Components.

It is a recreation of a previous demo, where Fstyle was used in conjunction with Vue and React. If you inspect the source code of this page, you will see that the stylers progress_bar_styler and stripes_styler are identical in both demos, thus demonstrating the portability of styles written using Fstyle.

It is important to note that the two Web Components in this demo each create their own Fstyle context, rather than sharing as is necessary in Vue or React. This is because each Web Component instance has its own shadow DOM tree that is isolated from the rest of the page, so Fstyle does not need to coordinate CSS classes globally. As such, a Web Component's ability to use Fstyle does not depend on any page-wide configuration. It is just an implementation detail.

• Fstyle
• Using Fstyle with Vue and React
• Styling Web Applications