WEBCOMPONENTS.
ORG Publish element
Search custom elements LAYOUT CALENDAR ROUTING EMOJI TOOLBAR
Introduction
Contents
What are web components?
What are web components?
Web components are a set of web platform APIs that allow you to create new
Specifications
custom, reusable, encapsulated HTML tags to use in web pages and web apps.
Custom components and widgets build on the Web Component standards, will
Custom Elements
work across modern browsers, and can be used with any JavaScript library or
Shadow DOM framework that works with HTML.
Web components are based on existing web standards. Features to support web
ES Modules
components are currently being added to the HTML and DOM specs, letting web
HTML Template developers easily extend HTML with new elements with encapsulated styling and
custom behavior.
How do I use a web component?
Specifications
How do I define a new HTML element?
Web components are based on four main specifications:
Creating and using a shadow root
WEBCOMPONENTS.ORG Publish element
Custom Elements
Libraries for building web components
Search custom elements
The Custom Elements specificationLAYOUT
lays the foundation
CALENDAR
for designing
ROUTING
and using
EMOJI TOOLBAR
new types of DOM elements.
Shadow DOM
The shadow DOM specification defines how to use encapsulated style and
markup in web components.
ES Modules
The ES Modules specification defines the inclusion and reuse of JS documents in
a standards based, modular, performant way.
HTML Template
The HTML template element specification defines how to declare fragments of
markup that go unused at page load, but can be instantiated later on at runtime.
How do I use a web component?
The components on this site provide new HTML elements that you can use in your
web pages and web applications.
Using a custom element is as simple as importing it, and using the new tags in an
WEBCOMPONENTS.ORG HTML document. For example, to use the paper-button element: Publish element
<script type="module" src="node_modules/@polymer/paper-button/paper-but
Search custom elements LAYOUT CALENDAR ROUTING EMOJI TOOLBAR
...
<paper-button raised class="indigo">raised</paper-button>
There are a number of ways to install custom elements. When you find an
element you want to use, look at its README for the commands to install it. Most
elements today can be installed with NPM. NPM also handles installing the
components' dependencies. For more information on NPM, see npmjs.com.
For example, the paper-button overview describes the install process with npm:
mkdir my-new-app && cd my-new-app
npm install --save @polymer/paper-button
How do I define a new HTML element?
This section describes the syntax for the cross-browser version of the Web
Components specification.
Use JavaScript to define a new HTML element and its tag with the
WEBCOMPONENTS.ORG customElements global. Call customElements.define() with the tag Publish
name youelement
want to create and a JavaScript class that extends the base HTMLElement.
Search custom elements For example, to define a mobile drawer
LAYOUTpanel,
CALENDAR :
ROUTING
<app-drawer> EMOJI TOOLBAR
class AppDrawer extends HTMLElement {...}
window.customElements.define('app-drawer', AppDrawer);
To use the new tag:
<app-drawer></app-drawer>
Using a custom element is no di erent to using a <div> or any other element.
Instances can be declared on the page, created dynamically in JavaScript, event
listeners can be attached, etc.
<script>
// Create with javascript
var newDrawer = document.createElement('app-drawer');
// Add it to the page
document.body.appendChild(newDrawer);
// Attach event listeners
document.querySelector('app-drawer').addEventListener('open', function(
</script>
WEBCOMPONENTS.ORG Publish element
Creating and using a shadow root
Search custom elements LAYOUT CALENDAR ROUTING EMOJI TOOLBAR
This section describes the syntax for creating shadow DOM with the new cross-
browser version (v1) of the shadow DOM specification. Shadow DOM is a new
DOM feature that helps you build components. You can think of shadow DOM as a
scoped subtree inside your element.
A shadow root is a document fragment that gets attached to a "host" element.
The act of attaching a shadow root is how the element gains its shadow DOM. To
create shadow DOM for an element, call element.attachShadow() :
const header = document.createElement('header');
const shadowRoot = header.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<h1>Hello Shadow DOM</h1>'; // Could also use a
// header.shadowRoot === shadowRoot
// shadowRoot.host === header
Libraries for building web components
Many libraries already exist that make it easier to build web components. The
libraries section of the site has additional details but here are some you can try
out:
WEBCOMPONENTS.ORG Publish element
Hybrids is a UI library for creating Web Components with simple and
functional API.
Search custom elements LitElement uses lit-html to render
LAYOUTinto the element's
CALENDAR Shadow EMOJI
ROUTING DOM andTOOLBAR
adds
API to help manage element properties and attributes.
Polymer provides a set of features for creating custom elements.
Slim.js is an opensource lightweight web component library that provides
data-binding and extended capabilities for components, using es6 native
class inheritance.
Stencil is an opensource compiler that generates standards-compliant web
components.
Getting started Community Elements About
Introduction News & articles Publish an element About webcomponents.org
Polyfills Chat on Gitter Publish a collection Send feedback
Resources Preview an element View source on GitHub
Specifications Setup GitHub integration Raw assets
Libraries Previous webcomponents.org
WEBCOMPONENTS.ORG Publish element
Search custom elements LAYOUT CALENDAR ROUTING EMOJI TOOLBAR
