MDN web components, css-tricks, a blog post. Custom Elements, HTML Templates, Shadow DOM, HTML Imports. Important things:
scripting required
Browser-scripting must be enabled for web components to appear. A component may fail where javascript breaks or doesn't load.
custom elements must include hyphen in the name
A custom element must appear like this <custom-element></custom-element>
. More rules in the front-end naming universe. Want to use a named variable in javascript? Do not include a hyphen. Want to upload your script to npm? Do not uppercase characters in the name. Want to name a custom element? Do include a hyphen.
var myModule = require('mymodule');
myModule.addContent('<my-module></my-module>');
Shadow node access from parent document
javascript: querySelector cannot obtain reference to shadow DOM elements
stylesheet: can access and style shadow DOM elements using new selectors
by default styles in the parent document do not affect web components (and vice-versa)
Imported components block page load
parent.html<link rel="import" href="jquery.html">
jquery.html<script type="text/javascript" src="jquery.js"></script>
the above blocks page load, however, jquery.html imported from multiple locations uses one request.
mdn: 'HTML Imports is indtended to be the packaging mechanism for Web Components'.
Scripted access to hooks
The standard browser-triggered hooks, custom hooks definable as well:
createdCallback
(created),attributeChangedCallback
(chuse BEM and you're already safeenteredViewCallback
(DOM inserted),leftViewCallback
(DOM removed)Web Component Parts mdn
Custom Elements, HTML Templates, Shadow DOM, HTML Imports.
hello world
including an html-only component
hello world populated
'Scripted' is provided within the <hello-world-scripted>
element
slider