You’ve heard of the DOM. Most of the time you’ve heard bad things. DOM traversal slow! DOM operations are expensive! DOM API is a mess! Its true that the DOM gets its share of bad press but when we take a step back and calm ourselves, we realize that the DOM is the most critical part of what we do as web developers and it’s of paramount importance that we make an effort to understand it. DOM or the Document Object Model is the object graph representation of the declarative HTML markup. Every HTML tag gets translated into an object internally. For example, a simple <div> gets translated into HTMLDivElement or a <span> gets translated into an HTMLSpanElement. When the parser runs, it knows which object to instantiate based on the markup that it encountered. . Essentially, every HTML tag is backed by a class W e know that some HTML elements . An example being the <h1> tag. We know that whatever text we enclose within an <h1> tag has its font-size at 2em, font-weight bold and display block. Some elements take . An example being the <a> tag which takes an “href” attribute which allows us to link to a different page. This ability of encapsulating representation and behavior is achieved by the browser’s internal APIs that are used to implement different types of elements. encapsulate their representation attributes that dictate some behavior Enter web components. are a set of lower level APIs that the browser exposes so that they can be used to develop custom elements which can encapsulate representational logic and behavioral logic. Since web component APIs are native to the browsers, these custom elements can function framework and library free on a browser that supports the web components specification. Web Components natively Web components primarily composes of 4 features: Custom Elements Shadow DOM HTML Imports HTML Templates Lets dig deeper into each one of these features and the part you’ve been waiting for…the code! Custom Elements Custom Elements allow to be implemented. Custom elements can be They can be like any HTML tag. They can be created by using the basic building blocks of web development — html, css and javascript. new HTML tags extended from existing custom elements. dropped in and used The simplest way to create a custom element is to extend and register the element part of the browser’s vocabulary. HTMLElement The element can now simply be used like any other HTML tag. <name-tag></name-tag> However, we see no difference. This is because no implementation has been defined for this custom element. Lets add that in. Now, if we just use as an HTML element, we see the following output on the page: <name-tag></name-tag> This is a custom element Lets make our element a little bit smarter. For the custom element to be usable, it must have a public API through which properties can be provided to the element which would dictate how the component would render. Lets implement this behavior with the intention that we will use the element like <name-tag name=”John Doe” />: We can now not only use the element as if the element was available as part of HTML’s standard vocabulary like <name-tag name=”John” />, but we can also use it with javascript just like we can with any other natively provided element: Lets summarize the workflow for a custom element: A is created that extends the class. This tells the browser to treat the custom element as an HTML element. class HTMLElement Decide on the or that will be passed to the element. Decide which properties can and expose those by returning a list of the property names from the static method. properties attributes change observedAttributes or that we expect will be passed to the element is stored as local variables in the class’s . Properties attributes constructor Implement the method which gets invoked every time a property in the observation list changes. This method is used to call property . The attributeChangedCallback is a part of a few that come with custom elements. attibuteChangedCallback setters lifecycle hooks Define simple for the properties which set the local property values and perform some rendering logic, for example setting the innerHTML. ES6 getters and setters If you have followed along, you’ve created your first custom element. As promised, this element will work natively on any browser that is web components compliant. We will get to how we can ship the custom element at a later post. We will come back to custom elements since the posts are meant to build on top of each other. Stay tuned for Part II where we look at . Shadow DOM is how hackers start their afternoons. We’re a part of the family. We are now and happy to opportunities. Hacker Noon @AMI accepting submissions discuss advertising &sponsorship To learn more, , , or simply, read our about page like/message us on Facebook tweet/DM @HackerNoon. If you enjoyed this story, we recommend reading our and . Until next time, don’t take the realities of the world for granted! latest tech stories trending tech stories
