Liquid ships both, CSS Components and Web Components. For instance, you can use the
ld-button Web Component or its CSS Component counterpart:
<ld-button>Text</ld-button> <button class="ld-button">Text</button>
Both look the same, so which one should you use?
There are a few points to concider, when deciding on one of the two options or a mix of both:
Convenience: Most Liquid Web Components are much more "compact" when it comes to the amount of code that you have to write than with their CSS counterparts. Your code becomes more readable. Additionally, you may benefit from type checking and intellisense.
Accessibility: Some Web Components handle accessibility issues under the hood. For instance, the
ld-typo Web Component applies an
aria-label automatically when used with uppercase heading variants. With CSS Components you have to deal with such things yourself.
Encapsulation: Shadow DOM shields Web Components from their surrounding environment. This means that when you use Liquid's Web Components, you do not need to be concerned about accidentally overriding Liquid's CSS (except for CSS custom props), nor worry about our internal DOM being interfered with anything outside the component. CSS Components on the other hand give a bit more freedom when it comes to customization.
With all that in mind, you'll need to make a choice case by case.