Web Component

MDN web components, css-tricks, a blog post. Custom Elements, HTML Templates, Shadow DOM, HTML Imports. Important things:

  1. scripting required

    Browser-scripting must be enabled for web components to appear. A component may fail where javascript breaks or doesn't load.

  2. 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>');

  3. 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)

  4. 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'.

  5. Scripted access to hooks

    The standard browser-triggered hooks, custom hooks definable as well:

  6. Web Component Parts mdn

    Custom Elements, HTML Templates, Shadow DOM, HTML Imports.

Examples: