The W3C standards way of creating reusable building blocks for app development. Basically Web Components are just custom HTML elements used to compose web apps.
custom html elements composed to build web apps using W3C standards standard html, javascript and css
- WebComponents.org
- W3C intro
- Custom Elements
- Polymer Project
- Pluralsight Course
- Google I/O 2015 - Polymer and modern web APIs: In production at Google scale
- Material Web Components Catalog
- Microsoft Graph
- Polymer Talk
- Pluralsight - Vanilla Web Components...
- Lynda.com course
Web Components embrace evolving browser capabilities that allow us to tackle complexity by providing true encapsulation and reuse.
allows encancing built-in elements
Simplify process of building complex web apps by hiding complexity in component implementation. Allows for reuse provides encapsulation of appearance and behavior by keeping css and script separate from other components frameworks do this but webcomponents use the platform/standards.
The standards needed for web components can all be used on their own:
# Web Components Standards
- HTML Templates - Defines how to declare fragments of markup that go unused at page load but can be instantiated later at runtime useing the
<template>-tag - HTML Imports - allows for HTML markup to be defined in files and imported into documents using the
<link>-tag. - Custom Elements - Specifies how to create extend current or define new types of DOM elements along with custom properties, behavior and attributes
- Shadow DOM - Encapsuling and isolating element and their style from the page as a whole.
# HTML Templates
Provides a standard/native way to declare template markup using the <template>-tag. It's content is said to be inert (inactive) until instantiated. Templates can basically be inserted wherever a child node is allowed. Supported by major modern browsers.