Patternfly Web Components

Installation

NPM

Install patternfly-webcomponents via NPM

npm install --save patternfly-webcomponents

Load the components you need alongside Patternfly CSS

Oh snap! There's something going on here.

<script src="node_modules/patternfly-webcomponents/dist/js/pf-alert.js"></script>
<pf-alert type="success"> Oh snap! There's something going on here. </pf-alert>

About the Project

Patternfly web components provides a set of core web component implementations for the Patternfly project.

What is a web component?

Web components comprise a set of new browser features added by the W3C to the HTML and DOM specifications which allow for the creation of reusable components in web documents and web applications. Web components will work across modern browers and can be used with any Javascript library or framework that works with HTML.

Why should we use them?

Web components promote base level abstractions for component presentation and behavior based on browser standards. This allows for better encapsulation and interoperability of individual HTML elements. It also encourages more semantic HTML which expresses the true meaning of each HTML element.

How do we create them?

Web components are an evolving feature set, and some browsers are still in the process of implementing the new web component standards. However, web component polyfills should enable you to start using web components in modern browsers today. With Custom Elements and HTML Templates currently having the widest browser support, we have chosen to focus on these standards first in our patternfly-webcomponent implementations. We've also chosen to write our web components using ES6 Modules for current browser and framework support, but our long term plan is to adopt and support the Shadow DOM and HTML Import specifications as well.

Where can we find other examples?

The WebComponents.org and CustomElements.io projects provide a wide array of web component examples being used in various design and UI frameworks.

One of the core philosophies of the web component community is to reduce dependencies (including jQuery) so that components may be more easily adopted and integrated across all frameworks and browsers. This means that projects like the ones found here and here which promote the use of "vanilla" javascript will naturally be applicable candidates for web components. As the DOM API in browsers has evolved, we can now reliably write components without the use of legacy APIs like jQuery. You can read more on this here.