Web components

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.

Web components are based on existing web standards. Features to support web components are currently being added to the HTML and DOM specs, letting web developers easily extend HTML with new elements with encapsulated styling and custom behavior. https://www.webcomponents.org/

Ripple exports a limited set of components as standard browser native web components. The advantage of using Web components is they can be dropped straight into conventional webpages and any CMS without a javascript build pipeline, such as Squiz Matrix and Salesforce.

Support for this output target is currently experimental, if you think you have a use case for using Web components in your project please add a comment here.

As with the other methods, set up access to Github Packages and then install Ripple UI in your project:

npm install @dpc-sdp/ripple-ui-core --save

A basic example of how to use the web component exports can be found under examples/webcomponents in the ripple-framework monorepo.