Meddle into Mettle Web Components
Johnson & Johnson IT is proud to release it’s first web based front-end package called Mettle. Mettle is a set of web development toolkits that will include a collection of custom element web components, front-end libraries and a CLI(command line interface) for single page application development. This initial release of Mettle-Components will feature nine(9) custom elements that can be used in any modern browser.
What are custom elements?
Custom elements are newly created or extended HTML tags that a web developer can register to the browser using JavaScript. By using custom elements, you can combine HTML and JavaScript to create a unique interface that can then be included as a HTML tag in your application. Custom elements are native to the browser so nothing extra is needed to get started.
Pro Tip: All custom elements must have a dash(-) in the HTML tag.
No assembly required!
Wouldn’t it be great if you can use a tool-tip tag on your site without the hassle of downloading a specific library and writing extra HTML to accommodate the JavaScript and CSS? With Mettle Components, that is now possible.
In the example below, we have a span tag. When a user hovers over it, the custom element mettle-tool-tip will be included in the HTML and offer all the functionality expected from a tool-tip.
<html>
<head>
<title>Mettle Component Example</title>
</head>
<body> <span id="id-44629472-5691-4c53-b7f0-c5488854761b">
Hover or tap me for tip
</span>
<mettle-tool-tip
data-for="id-44629472-5691-4c53-b7f0-c5488854761b">
<p>Slot HTML/Text</p>
</mettle-tool-tip><script type="module" src="./node_modules/@johnsonandjohnson/mettle-components/index.js"></script></body>
</html>
As a bonus, if the spantag is removed from the page, the tool-tip custom element will serve no purpose and will remove itself from the page. We hope you find this smart design useful. The mettle-tool-tip can also be easily re-purposed by reassigning the data-for attribute and linking it to a new tag id.
More to come!
Mettle has been tested, refined, and polished and we plan to add more components in the very near future which will include a modal, virtual-list, toggles, navigation and much more. We hope that these components will serve as a complement to other custom element libraries; be they of your own creation or from a third party source.
We know you’ll benefit from Mettle as much as we have. Join our community today, we’d love to have you!
Check out our documentation and repository on Github: https://github.com/johnsonandjohnson/mettle-components
