These features exist in dart:html, for example Element.reateShadowRoot and Document.register. However those APIs are not supported on all browsers yet unless you load the polyfills, as indicated below.
Include the polyfills in your HTML
<head> to enable Shadow DOM:
<script src="packages/web_components/platform.js"></script> <script src="packages/web_components/dart_support.js"></script>
You can also use an unminfied version for development:
<script src="packages/web_components/platform.concat.js"></script> <script src="packages/web_components/dart_support.js"></script>
Because the Shadow DOM polyfill does extensive DOM patching, platform.js should be included before other script tags. Be sure to include dart_support.js too, it is required for the Shadow DOM polyfill to work with dart2js.
For example, after registering a special kind of button called
use the super button just like this:
Custom elements are still elements. We can create, use, manipulate, and compose
them just as easily as any standard
See the Polymer Custom Elements page for more information.
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 Polymer Shadow DOM page for more information.
To rebuild platform.js:
# Make a directory like ~/src/polymer mkdir ~/src/polymer cd ~/src/polymer git clone https://github.com/polymer/tools # Sync polymer repositories ./tools/bin/pull-all-polymer.sh # If you don't have "npm", get it here: http://nodejs.org cd platform-dev npm install grunt minify audit cd build # Copy the build output to your Dart source tree cp build.log platform* ~/dart/dart/pkg/web_components/lib
This file contains highlights of what changes on each version of this package.
registerDartTypeand updates to platform 0.3.3-29065bc (re-applies the changes in 0.3.5).
Add this to your package's pubspec.yaml file:
dependencies: web_components: ">=0.4.0 <0.5.0"
If you're using the Dart Editor, choose:
Menu > Tools > Pub Install
Or if you want to install from the command line, run:
$ pub install
Now in your Dart code, you can use:
interop.dart'; import 'package:web_components/ polyfill.dart';
|0.4.0||Jun 27, 2014||Go to the documentation of web_components 0.4.0||Download web_components 0.4.0 archive|
|0.3.5+1||Jun 27, 2014||Go to the documentation of web_components 0.3.5+1||Download web_components 0.3.5+1 archive|
|0.3.5||Jun 24, 2014||Go to the documentation of web_components 0.3.5||Download web_components 0.3.5 archive|
|0.3.5-dev.4||Jun 24, 2014||Go to the documentation of web_components 0.3.5-dev.4||Download web_components 0.3.5-dev.4 archive|
|0.3.5-dev.3||Jun 19, 2014||Go to the documentation of web_components 0.3.5-dev.3||Download web_components 0.3.5-dev.3 archive|
|0.3.5-dev.2||Jun 14, 2014||Go to the documentation of web_components 0.3.5-dev.2||Download web_components 0.3.5-dev.2 archive|
|0.3.5-dev.1||Jun 12, 2014||Go to the documentation of web_components 0.3.5-dev.1||Download web_components 0.3.5-dev.1 archive|
|0.3.5-dev||Jun 11, 2014||Go to the documentation of web_components 0.3.5-dev||Download web_components 0.3.5-dev archive|
|0.3.4||May 14, 2014||Go to the documentation of web_components 0.3.4||Download web_components 0.3.4 archive|
|0.3.3||Apr 03, 2014||Go to the documentation of web_components 0.3.3||Download web_components 0.3.3 archive|