What is a web component exactly?
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.
Seriously though, what are they?
Think of web components of reusable widgets on your site. Things like cards, buttons, accordions, etc. What's awesome is they come equipped with all the styles they need, and they are largely unaffected by anything else on the page. Just plug in your content. Easy!
Can I see an example?
Sure! This is a basic "custom alert" component, in which you could adjust the level of importannce to change the color from alert to warning, which might change the color from yellow to red. Inside the component, you might add some text like "Caution" or whatever you decide. You can find plenty of other web components in the wild on webcomponents.org.
<custom-alert importance-level="warning">
<p>Caution!</p>
</custom-alert>
The RHElements library looks awesome. Who is it for?
Web components will allow Red Hatters (and beyond) to share code, look & feel, ux standardizations, and reduce reinvention of the wheel. After all, we are all about collaboration.
This is also an open source project, so it is free to use outside of Red Hat. RHElements are themable, so check out our theme documentation to learn how to make them match your site colors.
I'm ready to use RHElements on my site, what do I need to do?
Great, you can head over to the get started page.
How can I help?
Thanks for asking! If you are interested in contributing to the RHElements project, you can follow this development tutorial.
RHElements
