• Custom Elements
• HTML Imports
• <template>
• #shadow-dom

ALL W3c Working DRAFTS

Custom Elements

*comparable to AngularJS directives.

Naming rules:

Custom Elements need to have a hyphen in the name of their element tag. ie: <katz-component> to avoid future conflicts with newly added HTML elements.

Extension usage:

<div is="katz-component">

Implementation example.

HTML Imports

Resolving Dependencies

HTML imports that include the same javascript assets don't need to worry about them being downloaded/executed more than once.

Scripts from imports will also be deferred unless specified as asynchronous.

Reducing Network Requests

HTML imports that include the same javascript assets don't need to worry about them being downloaded/executed more than once.

We can also Vulcanize our web components prior to importing them.

HTML Imports (continued)

Shadow DOM

[  Live Example of Shadow Dom ]

Implementation example.

Templates

... generates output for Custom Elements

Parsed as markup but doesn't fetch contents until instantiated.

Additional information:

Implementation demo.