Community hub
Recent from talks
Knowledge base stats:
Talk channels stats:
Members stats:
Web Components
Web Components are a set of features that provide a standard component model for the web allowing for encapsulation and interoperability of individual HTML elements. Web Components are a popular approach when building microfrontends.
Primary technologies used to create Web Components include:
There are two parts to Custom Elements: autonomous custom elements and customized built-in elements. Autonomous custom elements are HTML elements that are entirely separated from native HTML elements; they are essentially built from the bottom up using the Custom Elements API. Customized built-in elements are elements that are built upon native HTML elements to reuse their functionality.
The Shadow DOM is a functionality that allows the web browser to render DOM elements without putting them into the main document DOM tree. This creates a barrier between what the developer and the browser can reach; the developer cannot access the Shadow DOM in the same way they would with nested elements, while the browser can render and modify that code the same way it would with nested elements. The impact of CSS scoped within the Shadow DOM of a particular element is that HTML elements can be encapsulated without the risk of CSS styles leaking and affecting elements that they were not supposed to affect. Although these elements are encapsulated with regard to HTML and CSS, they can still fire events that can be picked up by other elements in the document.
The scoped subtree in an element is called a shadow tree. The element the shadow tree is attached to is called a shadow host.
A Shadow DOM must always be connected to an existing element, either through attaching it as a literal element or through scripting. In JavaScript, Shadow DOMs are attached to an element using Element.attachShadow().
A HTML template is a way to insert chunks of HTML that are cloned from the template at will. The syntax of HTML templates looks like this:
Scripts will not run, and resources that are inside a template will not be fetched until the template is instantiated.
Hub AI
Web Components AI simulator
(@Web Components_simulator)
Web Components
Web Components are a set of features that provide a standard component model for the web allowing for encapsulation and interoperability of individual HTML elements. Web Components are a popular approach when building microfrontends.
Primary technologies used to create Web Components include:
There are two parts to Custom Elements: autonomous custom elements and customized built-in elements. Autonomous custom elements are HTML elements that are entirely separated from native HTML elements; they are essentially built from the bottom up using the Custom Elements API. Customized built-in elements are elements that are built upon native HTML elements to reuse their functionality.
The Shadow DOM is a functionality that allows the web browser to render DOM elements without putting them into the main document DOM tree. This creates a barrier between what the developer and the browser can reach; the developer cannot access the Shadow DOM in the same way they would with nested elements, while the browser can render and modify that code the same way it would with nested elements. The impact of CSS scoped within the Shadow DOM of a particular element is that HTML elements can be encapsulated without the risk of CSS styles leaking and affecting elements that they were not supposed to affect. Although these elements are encapsulated with regard to HTML and CSS, they can still fire events that can be picked up by other elements in the document.
The scoped subtree in an element is called a shadow tree. The element the shadow tree is attached to is called a shadow host.
A Shadow DOM must always be connected to an existing element, either through attaching it as a literal element or through scripting. In JavaScript, Shadow DOMs are attached to an element using Element.attachShadow().
A HTML template is a way to insert chunks of HTML that are cloned from the template at will. The syntax of HTML templates looks like this:
Scripts will not run, and resources that are inside a template will not be fetched until the template is instantiated.