UI Navigation and Layout Redesign
Using web components to encapsulate CSS and resolve design system conflicts

Using web components to encapsulate CSS and resolve design system conflicts

5/3/2021 · Tyler Williams

What this post added

Introduced web components (custom elements, shadow DOM, templates, slots) to encapsulate CSS and resolve conflicts between the new Slippers design system (using Tailwind CSS) and existing legacy CSS on the GitLab blog. Implemented a fallback mechanism using `yield` in the light DOM for cases where JavaScript fails to load. This allowed for incremental adoption of the new design system without a full site rewrite.

Read the original post ↗