Using Web Components

Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.

The following technologies allow Bolt components to be distributed as a set of self-contained custom elements that can be used today and seamlessly upgraded in the future as our visual and technology standards evolve.

• Custom Elements
  • Encapsulates custom behavior via custom HTML tags such as <bolt-button> that can be used alongside other HTML elements in a web page.
  • Custom elements support standard browser event handling and can have parameters passed to them as defined in Bolt component documentation.
• Shadow DOM
  • Encapsulates styles such that host content doesn't affect styling of custom elements, and vice-versa.
• HTML Templates
  • Enables the definition and use of encapsulated markup within the Shadow DOM of a custom element.
  • Many custom elements wrap author-defined content via the use of slots.

Bolt components are developed using Lit Element, a lightweight library that provides a set of APIs on top of the technologies above, in order to simplify development.

Because Web Component technologies are built into modern browsers and extend the existing DOM APIs, Bolt components are compatible with most web-based applications and sites, including static sites, Java-based or Angular-based applications, and content management systems (CMS).

• The Bolt JavaScript bundle defines and registers our custom elements, for use in consuming project markup.
• The Bolt CSS bundle provides additional, context-dependent and global, styles and utilities.

Bolt components are compatible with Angular reactive forms through the use of a library of directives. We are happy to provide technical support with Angular installations and troubleshooting as needed.

Other front end frameworks like React may experience limited functionality with Bolt and Web Components. Unfortunately we are unable to provide full support for these frameworks due to a number of known issues.