Web Components

Web Components are a set of features currently being added by the W3C to the HTML and DOM specifications that allow for the creation of reusable widgets or components in web documents and web applications.

YOUTUBE cuoZenpQveQ It took a few years and a couple of trips around the block, but Web Components have truly arrived: they’re natively supported in Chrome and Safari today, wit..- youtube.com

The intention behind them is to bring component-based software engineering to the World Wide Web. The components model allows for encapsulation and interoperability of individual HTML elements - wikipedia

YOUTUBE 71JdaRofCgA The web is evolving at light speed and all the web applications are trying to catch up. It has become very difficult for a new developer or even an existing ..- youtube.com

- Pollyfill - github

Web Components consist of 4 main features which can be used separately or all together: - **Custom Elements** - new HTML elements - **Shadow DOM** - Encapsulated DOM - **HTML Imports** - importing HTML documents - **HTML Templates** - contain inert chunks of DOM

# Polymer

Polymer is basically a shim for web components. Polymer 2.0 includes a cli and app toolbox to make creating web standards compliant components easier.

# Stencil

Stencil is basically a compiler for web components and is the toolchain that Ionic is going to use to create it's next version of re-useable cross-platform components.

# Custom Elements

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 (Application programming interface).

Customized built-in elements are elements that are built upon native HTML elements to reuse their functionality.Custom Elements

# Shadow DOM

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 (Cascading Style Sheets) styles leaking and affecting elements that it was 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 - glazkov.com

The ability to scope HTML and CSS (Cascading Style Sheets) is essential to the creation of Custom Elements. If shadow DOM did not exist, different external Custom Elements could interact in unwanted ways.

# HTML Import

HTML import is a tool to include HTML documents and web components from external sources without using AJAX (Ajax (programming)) requests and similar methods - w3.org

The syntax for doing an HTML import looks like this:

<link rel="import" href="mydocument.html">

To avoid loading and executing scripts twice that are introduced through imports, HTML import skips loading and executing files that have previously been loaded - webcomponents.org

Mozilla Firefox (Firefox) has no support for HTML import and does not intend to implement it - mozilla.org

HTML Import is also related to an early idea in the development of hypertext called Transclusion, where all or part of an document is inserted into another by reference.

# HTML Template

HTML template is a way to create insert chunks of HTML that are stamped at will. The syntax of HTML templates look like this:

<html> <template> <p>The HTML you wish to instantiate at will</p> </template> </html>

Scripts will not run, and resources that are inside a template will not be fetched until the template is stamped out - webcomponents.org

# Libraries

There are several libraries that are built on Web Components with the aim of increasing the level of abstraction when creating custom elements. Four of the familiar libraries are X-Tag , Slim.js, Polymer (Polymer (library)), and Bosonic.

Two of these, Bosonic and Polymer, provide ready-made components that are free to use. These components can be used interchangeably as they are all built on open web technologies - vaadin.com

# Examples: markdown

# Links - webcomponents.org - webcomponents.org - Community - webcomponents.org - Introduction -... - webcomponents.org - webcomponents.org - webcomponents.org - PolymerElements/marked-... - webcomponents.org - StartPolymer/s-markdown -... - webcomponents.org - Juicy/juicy-markdown-editor... - webcomponents.org - Dealing with files - Learn... - mozilla.org - How to Modularize HTML Using... - zellwk.com - Polymer (library) - Wikipedia - wikipedia.org - Welcome - Polymer Project - polymer-project.org - X-Tag ★ Web Components - github.io - Web Components | MDN - mozilla.org