knownasilyaknownasilya
30

Ember Shadow Dom

screenshot of Ember Shadow Dom
ember

Write templates for your components inside of a Shadow DOM root.

Github

Overview:

The Ember Shadow DOM addon allows developers to write templates for their components inside of a Shadow DOM root, providing encapsulation of styles (CSS) and markup (HTML) while still using familiar templates.

Features:

  • Support for SSR/FastBoot in Chrome 90+
  • Compatibility with Ember.js v3.16 or above, Ember CLI v2.13 or above, and Node.js v12 or above
  • Use of {{yield}} instead of <slots> in Ember components
  • API to customize the mode and tagName of the Shadow Root
  • Support for testing components with an open shadow root using qunit-dom
  • Contribution and license details

Summary:

The Ember Shadow DOM addon provides developers with a convenient way to leverage the benefits of Shadow DOM in their Ember applications. It allows for encapsulated styles and markup, compatibility with SSR/FastBoot, and easy testing. With detailed installation and usage guides, developers can easily incorporate this addon into their Ember projects.

ember
Ember

Ember.js is a productive, battle-tested JavaScript framework for building modern web applications. It includes everything you need to build rich UIs that work on any device.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.