Tender Surrender

This article is a cross-post of webcomponents.org article.

We've previously explained that using Template, Shadow DOM, and Custom Elements allows you to create UI components for each function. However, it's inefficient to call the HTML, CSS, and JavaScript of a component that uses these methods separately.

Resolving dependencies is also not easy. Think of jQuery UI or Bootstrap. You had to write various resources such as JavaScript, CSS, and web fonts in separate tags as needed. It's easy to imagine how things could get complicated, especially with Web Components, which are supposed to treat each tag as a component.

HTML Imports allows you to load all of these resources together in a single HTML file.

This article is a cross-post of webcomponents.org article.

Needless to say, HTML is the most important element that makes up a web page. However, because the functionality it provides is low-level, when you try to create a complex component, it can quickly become an unclear structure full of divs. For example, what if you could create a unique component that incorporated the functionality you needed? For example, what if you could give that component a tag name that accurately represented its function? What if you could extend existing tags to add new functionality? Custom Elements makes this possible.

This article is a cross-post of the webcomponents.org article.

Shadow DOM allows you to add a DOM tree to a DOM element, containing styles and markup that are local to that node, separate from the rest of the webpage. This article and video explain Shadow DOM.

This article is a cross-post of webcomponents.org article.

I recently published a video about Templates, one of the technologies that make up Web Components, so I would like to explain it here.

The Chrome extension that became a local hot topic for a while as a girlfriend extension Project Tab Manager has reached version 3.0.