Web components – what is it?
With the object orientation in today’s common programming languages, the foundation stone for component development was laid. 
These components are independent software modules whose greatest advantage is their reusability. The clear delimitation of components results in the possibility that they can be combined with others and are also easier to maintain. With the web component architecture, the W3C has taken measures to bring these advantages to the World Wide Web. Two properties are particularly important for this. No external libraries should be necessary for the implementation of the web component technologies but should be part of the browser. The second factor that leads to success is the support of these technologies by all popular browsers.
For web developers who are having problems with bats around their house, Houston bat removal can be the solution.
Web component technology: templates
The advantages of template technology are particularly useful for recurring components within an application. For this purpose, the W3C included the template tag in HTML. The content of this tag is not rendered when the page is called up and therefore does not require any resources. The position at which the content of the template is now positioned in the DOM tree (Document Object Model Tree) can be determined using the id attributes in the HTML code via JavaScript.
Web component technology: shadow DOM
An essential aspect of the web components is the delimitation and independence from other parts of the application. So that, for example, style information does not affect other components, encapsulation is of central importance, which can be achieved with the Shadow DOM web component technology. The video tag can be cited as an example in the real world. The switching elements with which the videos are controlled are HTML elements that are given their appearance by CSS selectors. These elements should always look the same and must not be influenced by the style information of the embedding page. This is where the Shadow DOM technology comes into play.
Using JavaScript, the div container with the id “host” is set as the shadow root. In the HTML5 video example, this would be the video tag. Any number of HTML elements with style information can now be created and attached to the shadow root, thereby achieving the goal of encapsulation and independence.