Web components

Web components

• Custom element
• Shadow Dom
• Templates
• HTML import

JQuery Plugin

(function ( $ ) {
 
    $.fn.greenify = function( options ) {
        var settings = $.extend({
            color: "#556b2f",
            backgroundColor: "white"
        }, options );
 
        return this.css({
            color: settings.color,
            backgroundColor: settings.backgroundColor
        });
 
    };
 
}( jQuery ));

React

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

HTML

What do we need for Component

Element

Custom elements

https://w3c.github.io/webcomponents/spec/custom/

Own scope

Shadow DOM

https://www.w3.org/TR/shadow-dom/

Fill it with slots

Templates

https://www.w3.org/TR/html5/scripting-1.html#the-template-element

<template>

HTMLTemplateElement extends HTMLElement {
    content: DocumentFragment
}

How to load it?

HTML Import

Link tag

Where can it be used?

Polymer

https://www.polymer-project.org/1.0/

Tag - x

http://x-tag.github.io/

Bricks 

http://brick.mozilla.io/