About Web Components

[2zH]

TodoList

- [ ] Polyfills
- [ ] Framework
- [ ] Bundler
- [ ] Web Components with React and Vue
- [ ] Browser Support

To be continue......
Sorry...

[2zH]

Polyfills

Web Components

• Custom Element
• HTML Import
• HTML Template
• Shadow DOM

Browser support of polyfills: >= IE 11
Env test: http://html5test.com/

ECMAScripts 7+

• babel-core v7.0.0-alpha.17
• babel-preset-stage-0-alpha.17
• babel-preset-env: v2.0.0-alpha.17

Note: It won't include stage-x plugins. env will support all plugins in what we consider the latest version of JavaScript (by matching what we do in babel-preset-latest).

• Installation:

npm install \
babel-core@next \
babel-preset-env@next \
babel-preset-stage-0@next -D

Stage-0:

• babel-plugin-transform-do-expressions
• babel-plugin-transform-function-bind

Stage-1

• babel-plugin-transform-decorators
• babel-plugin-transform-export-extensions
• babel-plugin-transform-numeric-separator
• babel-plugin-transform-optional-chaining

Stage-2

• babel-plugin-transform-class-properties
• babel-plugin-transform-function-sent2

Stage-3

• babel-plugin-syntax-dynamic-import
• babel-plugin-transform-async-generator-functions
• babel-plugin-transform-object-rest-spread
• babel-plugin-transform-unicode-property-regex

CSS 4

• Pseudo-classes: :host, :host(), :host-context()
• Pseudo-element: ::slotted()
• Descendant combinator: >>>
• From w3c org page: CSS Scoping
• CSS 4 selectors test: http://css4-selectors.com/browser-selector-test/

[2zH]

Browser Support

- Edge: Microsoft Edge and Web Components

[2zH]

Web Component

Life Cycle

• constructor

when the element is created or upgraded

• connectedCallback

when the element is inserted into a document, including into a shadow tree

• disconnectedCallback

when the element is removed from a document

• attributeChangedCallback(attributeName, oldValue, newValue, namespace)

when an attribute is changed, appended, removed, or replaced on the element. Only called for observed attributes.

• adoptedCallback(oldDocument, newDocument)

when the element is adopted into a new document

[idea] Allow HTML Element attributes to accept any type of value, not just strings: WICG/webcomponents#519

The difference between Custom Elements and React JSX

• JSX props accept any type of value but element attributes only accept string
• JSX look like a function wrapper, through props to control childrens JSX.

[2zH]

Framework

• Polymer: Web component library by Google.
• SkateJS: Functional web component library.
• StencilJS: A Compiler for Web Components.