shadow_dom 0.9.2

  • README.md
  • Installing
  • Versions
  • --

Shadow DOM polyfill

Shadow DOM is designed to provide encapsulation by hiding DOM subtrees under shadow roots. It provides a method of establishing and maintaining functional boundaries between DOM trees and how these trees interact with each other within a document, thus enabling better functional encapsulation within the DOM. See the W3C specification for details.

Getting started

Include the polyfill in your HTML <head> to enable Shadow DOM:

    <script src="packages/shadow_dom/shadow_dom.debug.js"></script>

You can also use a minified version for deployment:

    <script src="packages/shadow_dom/shadow_dom.min.js"></script>

Because it does extensive DOM patching, it should be included before other script tags.

Useful resources

Learn the tech

Basic usage

var el = new DivElement();
var shadow = el.createShadowRoot();
shadow.innerHtml = '<content select="h1"></content>';

Shadow DOM subtrees

Shadow DOM allows a single node to express three subtrees: light DOM, shadow DOM, and composed DOM.

A component user supplies the light DOM; the node has a (hidden) shadow DOM; and the composed DOM is what is actually rendered in the browser. At render time, the light DOM is merged with the shadow DOM to produce the composed DOM. For example:

Light DOM

<my-custom-element>
  <!-- everything in here is my-custom-element's light DOM -->
  <q>Hello World</q>
</my-custom-element>

Shadow DOM

<!-- shadow-root is attached to my-custom-element, but is not a child -->
<shadow-root>
  <!-- everything in here is my-custom-element's shadow DOM -->
  <span>People say: <content></content></span>
</shadow-root>

Composed (rendered) DOM

<!-- rendered DOM -->
<my-custom-element>
  <span>People say: <q>Hello World</q></span>
</my-custom-element>

The following is true about this example:

  • The light DOM that belongs to <my-custom-element> is visible to the user as its normal subtree. It can expressed by .childNodes, .nodes, .innerHtml or any other property or method that gives you information about a node's subtree.
  • Nodes in light DOM or shadow DOM express parent and sibling relationships that match their respective tree structures; the relationships that exist in the rendered tree are not expressed anywhere in DOM.

So, while in the final rendered tree <span> is a child of <my-custom-element> and the parent of <q>, interrogating those nodes will tell you that the <span> is a child of <shadow-root> and <q> is a child of <my-custom-element>, and that those two nodes are unrelated.

In this way, the user can manipulate light DOM or shadow DOM directly as regular DOM subtrees, and let the system take care of keeping the render tree synchronized.

Polyfill details

You can read more about how the polyfill is implemented in JavaScript here: https://github.com/polymer/ShadowDOM#polyfill-details.

Getting the source code

This package is built from: https://github.com/dart-lang/ShadowDOM/tree/conditional_shadowdom

You'll need node.js to rebuild the JS file. Use npm install to get dependencies and grunt to build.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  shadow_dom: ^0.9.2

2. Install it

You can install packages from the command line:

with pub:


$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

Version Uploaded Documentation Archive
0.10.0 May 6, 2014 Go to the documentation of shadow_dom 0.10.0 Download shadow_dom 0.10.0 archive
0.9.2 Jan 31, 2014 Go to the documentation of shadow_dom 0.9.2 Download shadow_dom 0.9.2 archive
0.9.1 Nov 22, 2013 Go to the documentation of shadow_dom 0.9.1 Download shadow_dom 0.9.1 archive
0.9.0 Nov 6, 2013 Go to the documentation of shadow_dom 0.9.0 Download shadow_dom 0.9.0 archive
0.8.10+4 Nov 5, 2013 Go to the documentation of shadow_dom 0.8.10+4 Download shadow_dom 0.8.10+4 archive
0.8.10+3 Nov 4, 2013 Go to the documentation of shadow_dom 0.8.10+3 Download shadow_dom 0.8.10+3 archive
0.8.10 Nov 1, 2013 Go to the documentation of shadow_dom 0.8.10 Download shadow_dom 0.8.10 archive
0.8.9 Oct 31, 2013 Go to the documentation of shadow_dom 0.8.9 Download shadow_dom 0.8.9 archive
0.8.8 Oct 30, 2013 Go to the documentation of shadow_dom 0.8.8 Download shadow_dom 0.8.8 archive
0.8.7 Oct 28, 2013 Go to the documentation of shadow_dom 0.8.7 Download shadow_dom 0.8.7 archive

All 41 versions...

Popularity:
Describes how popular the package is relative to other packages. [more]
--
Health:
Code health derived from static analysis. [more]
--
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
--
Overall:
Weighted score of the above. [more]
--
Learn more about scoring.

This package version is not analyzed, because it is more than two years old. Check the latest stable version for its analysis.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.2.0-dev.3.0 <2.0.0