Thumbnail source: itnext
Let’s start with the Defenition of Web Component
Based on webcomponents.org
From the definition we know that using web component, we basically create a component that can be reuse on every project that use html because web component basically just a set of custom html tag.
So why that’s matters and what are the advantages of building a project using web component. Why don’t just use popular framework or library.
Well. That’s the beauty of web component. Every framework that built and used html will be supported by web component.
Back again and why that’s matters
We’re not going to talk every advantages of it. In this article we’re just focusing on one thing that i found very interesting
Shared Resource & Scoping
By using web component. We will be able to scoped resources that we have in our application and can be shared across every web application
Imagine you’re building a library that not specifically targeted for any framework or library.
This will be very useful
For Example in React Application
We can include web component in react because react use html to render component.
if we take a look at this example
class HelloMessage extends React.Component render() return <div>Hello <x-search>this.props.name</x-search>!</div>;
we can just add web component that we built on react applications on its render. one thing to notice that web component using class instead of className.
we can also do the opposite by adding react apps to our web applications that use web component
So how to write a Web Component
class XSearch extends HTMLElement connectedCallback() const mountPoint = document.createElement('span'); this.attachShadow( mode: 'open' ).appendChild(mountPoint); const name = this.getAttribute('name'); const url="https://www.google.com/search?q=" + encodeURIComponent(name); ReactDOM.render(<a href=url>name</a>, mountPoint); customElements.define('x-search', XSearch);
From the example above is an example of creating web component. It’s a class that extends HTMLElement. And isolate the scope of the element using shadow. By doing that the scope will be seperated to other component.
connectedCallback is one of the method for web component lifecyle that basically run before the component get render.
There are still configuration that we need to do in order to run web component. Basic webpack understanding will be required to configure the apps.
So that’s it.
Next: Start to build a project using web components | Turn react project to web components