![\"\"](\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/11\/202011_WebComponents_SPA-600x319.png\")
This series of blog posts<\/a> deals with these and other aspects regarding the interaction of web components and SPA frameworks, in particular React. The first part of the series focuses only on web components, what the term means, and how to build web components.<\/p>\n\n\n\n The term \u201cweb components\u201d refers to several separate HTML specifications that deal with various aspects of the development of one\u2019s own components. Consequently, there is no such thing as \u201cone\u201d standard for web components; rather, it is a combination of several specifications<\/a>.<\/p>\n\n\n\n The two most important ones are \u201cCustom Elements\u201d and \u201cShadow DOM\u201d. The Custom Elements specification describes the JavaScript base class \u201cHTMLElement\u201d, among others, from which individual components have to be derived. This class provides numerous lifecycle methods that allow you to respond to various events in the component\u2019s life cycle. You can, for example, program a response to the component being integrated into a document or attributes of the component being set. The developers of a component can then update the presentation of the component. Custom Elements furthermore comprise the possibility to register individual component classes under a specific HTML tag so that the component is then available throughout the entire document.<\/p>\n\n\n\n \u201cShadow DOM\u201d means a method that allows for a separate DOM tree, which is largely isolated from the rest of the document, to be created for a component. This means, for example, that CSS properties set globally in the document do not take effect in the Shadow DOM, and on the other hand, CSS definitions within a component do not affect other elements in the document. The goal is to better encapsulate the components and avoid unwanted side effects when integrating foreign web components.<\/p>\n\n\n\n The following code block shows a simple Hello World component that comprises a property for the name of the person to be greeted.<\/p>\n\n\n\n Firstly, a separate Shadow DOM tree is created for the component in the constructor of the component. \u201cMode: open\u201d ensures that it is possible to access the DOM tree of the component from the outside with JavaScript despite the Shadow DOM barrier.<\/p>\n\n\n\n Then, the \u201cshadowRoot\u201d, i.e. the root node of the Shadow DOM, is created according to our requirements\u2014in this case, with \u201cinnerHTML\u201d.<\/p>\n\n\n\n With \u201cobservedAttributes\u201d, we describe which attributes the component is supposed to have and\/or which attributes we want to be notified of (we can also specify standard attributes such as \u201cclass\u201d at this point).<\/p>\n\n\n\n The notification is done by means of the \u201cattributeChangedCallback\u201d method, with the name of the changed attribute and both the old and the new value as parameters. Since we only specified one attribute in \u201cobservedAttributes\u201d in this case, checking the name of the attribute is not really necessary. In the case of several attributes, however, it is important to always check which attribute has been changed in each case.<\/p>\n\n\n\n In our case, we first check whether the new value is actually different from the previous one (we will see how this can happen later on). Then, we set the \u201cperson\u201d property that we created as class variable to the value of the submitted attribute.<\/p>\n\n\n\n To update the presentation of the component, the \u201cupdate\u201d method was created in this example. This method is not part of the Custom Elements standard, but only serves to gather the update logic in one place in this case. We retrieve the previously created span element with the ID \u201cperson\u201d from the Shadow DOM and set its text to the value of the \u201cperson\u201d property.<\/p>\n\n\n\n The code example shows how, in a final step, our component class is registered with the tag name \u201capp-hello-world\u201d. It is important that the name comprises at least one minus sign. This rule was defined in order to avoid possible name collisions with future standard HTML tags. Choosing a meaningful prefix for one\u2019s own components has also proven to be useful to prevent collisions with other component libraries as far as possible (the prefix \u201capp\u201d used in the example is, in fact, not a very good example in this respect). However, there is no sure way to prevent conflicts.<\/p>\n\n\n\n We are now able to submit simple data to the component by means of attributes. \u201cAttributes\u201d have a few more particularities and pitfalls, but we are going to deal with those in the next part of this series of blog posts<\/a>. For this general introduction, we will leave it at that.<\/p>\n\n\n\n The so-called \u201cslots\u201d are another important feature of web components that will be dealt with again in a later part of this series<\/a>. Slots allow for HTML snippets to be submitted to a component. The component then decides how to present the submitted elements. For example, if we want to build a message box that presents both a text and an icon inside a frame, it is advisable to submit the message text to the component by means of a slot instead of an attribute. This way, we are not limited to plain text, but we can use any HTML content we want.<\/p>\n\n\n\n Here is an example of how this can look in the application:<\/p>\n\n\n\n We only have to write the HTML tags we want as child elements. Within the component, there has to be a <slot> element in the Shadow root for this purpose. When the component is rendered, the submitted content is then displayed instead of the slot element.<\/p>\n\n\n\n A component can also contain several slots. In order for the browser to be able to decide which HTML elements to assign to which slot, so-called \u201cnamed slots\u201d have to be used in this case, i.e. the slots are given a specific name attribute. A component must not contain more than one slot without a name attribute. This one is called the \u201cdefault slot\u201d. Here is an example of how this can look in the component:<\/p>\n\n\n\n This is an example of how this could look when used:<\/p>\n\n\n\n You can see how the \u201cslot\u201d attribute is used here. The values have to match the \u201cname\u201d attributes of the slots within the component. Consequently, this is part of a component\u2019s public API and has to be documented accordingly.<\/p>\n\n\n\n So far, we have only considered how data can be submitted to the components, but we have not yet looked at the opposite direction. In order to be truly interactive, developers must also be able to respond to certain events and accept data from the component.<\/p>\n\n\n\n This is the purpose of HTML events. We are only going to take a brief look at this aspect in this post and address it in more detail later.<\/p>\n\n\n\n Web components can generate both standard events and custom events.<\/p>\n\n\n\n Standard events are useful if the type of event also appears with standard HTML elements and does not need to be invented, e.g. a KeyboardEvent<\/a>. Custom events are useful if additional data are to be sent with the event as payload. For example, if we build our own interactive table component where the users can select individual lines, it may be advisable to trigger an event upon selection that contains the data from the selected line as payload.<\/p>\n\n\n\n The mechanism for triggering an event is the same for all kinds of events. It can be seen in the following code block:<\/p>\n\n\n\n To generate an event, you either generate an instance of \u201cevent\u201d or one of the other event classes<\/a> (one of which is \u201cCustomEvent\u201d). Every event constructor expects the first parameter to be the type of event. This type is later used to register listeners for these events as well.<\/p>\n\n\n\n The second parameter is optional and constitutes a JavaScript object that configures the event. For CustomEvent, for example, the \u201cdetail\u201d field is provided to submit any desired payload data.<\/p>\n\n\n\n This post gives a brief introduction to the topic of \u201cweb components\u201d, and with the methods shown, you can already build your own components. There are, of course, numerous other aspects that need to be considered in the development of web components. After all, this topic fills a number of reference books. In this series of blog posts<\/a>, we want to focus on some of the pitfalls that can occur with individual issues, and examine how to avoid them. This series will also include a critical analysis of the web component API. The next blog posts<\/a> are going to focus on the interaction with SPA frameworks in particular.<\/p>\n","protected":false},"excerpt":{"rendered":" So-called \u201cweb components\u201d are one way of building reusable UI components for web applications. Unlike common single-page app frameworks such as React or Angular, the component model is based on web standards<\/p>\n","protected":false},"author":70,"featured_media":1182,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[8],"tags":[203,259,298,309,398,612,695,702,703],"topics":[701],"class_list":["post-1179","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web","tag-editorschoice","tag-angular-cli","tag-web-components","tag-react","tag-web","tag-web-application","tag-spa-frameworks","tag-web-applications","tag-ui-components","topics-web-components"],"acf":[],"yoast_head":"\nWhat are web components, and how do you build your own components?<\/h2>\n\n\n\n
class HelloWorld extends HTMLElement {\n\n person = \"\"\n\n constructor() {\n super();\n\n this.attachShadow({mode: \"open\"})\n\n this.shadowRoot.innerHTML = `\n <div>\n <p>Hello <span id=\"personGreeting\"><\/span><\/p>\n <\/div>\n `\n }\n\n static get observedAttributes() {\n return ['person']\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n if(name === \"person\") {\n if(this.person !== newValue) {\n this.person = newValue\n this.update()\n }\n }\n }\n\n update() {\n this.shadowRoot.querySelector(\"#personGreeting\").textContent = this.person\n }\n\n}\nwindow.customElements.define(\"app-hello-world\", HelloWorld)<\/pre>\n\n\n\n![\"\"](\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2020\/12\/202011_WebComponents_Shadow_DOM_en-600x424.png\")
Slots<\/h2>\n\n\n\n
<app-notification-box>\n\t<p>Some Text with additional <strong>tags<\/strong><\/p>\n<\/app-notification-box><\/pre>\n\n\n\n
<div>\n <div>Icon<\/div>\n <div id=\"content\">\n <slot><\/slot>\n <\/div>\n<\/div><\/pre>\n\n\n\n
<div>\n <div id=\"header\">\n <h1>\n <slot name=\"header\"><\/slot>\n <\/h1>\n <\/div>\n <div id=\"icon\">\n <slot name=\"icon\"><\/slot>\n <\/div>\n <div id=\"content\">\n <slot><slot>\n <\/div>\n<\/div><\/pre>\n\n\n\n
<app-notification-box>\n <p>Some Content<\/p>\n <span slot=\"header\">A meaningful Header<\/span>\n <img slot=\"icon\" src=\"...\" alt=\"notification icon\"\/>\n<\/app-notification-box><\/pre>\n\n\n\n
Events<\/h2>\n\n\n\n
class InteractiveComponent extends HTMLElement {\n\n triggerStandardEvent() {\n const event = new Event(\"close\")\n this.dispatchEvent(event)\n }\n\n triggerCustomEvent() {\n const event = new CustomEvent(\"some-reason\", \n { detail: { someData: \"...\" }}\n )\n this.dispatchEvent(event)\n }\n}<\/pre>\n\n\n\nConclusion<\/h2>\n\n\n\n