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: https://github.com/w3c/webcomponents/issues/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.