These features exist in dart:html, for example Element.createShadowRoot 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/webcomponents.min.js"></script> <script src="packages/web_components/dart_support.js"></script>
You can also use an unminified version for development:
<script src="packages/web_components/webcomponents.js"></script> <script src="packages/web_components/dart_support.js"></script>
Because the Shadow DOM polyfill does extensive DOM patching, webcomponents.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.
webcomponents.* files in this package are developed
here. Follow the instructions
there for how to build a new release and then copy the files into this package.
ImportCrawlerwith support for pre-parsed initial documents. This allows it to work better with other transformers in the same step (you can pass in a modified document).
@CustomElementtest in internet explorer.
initializelower bound to get bug fixes.
CustomElementannotation. This can be added to any class to register it with a tag in the main document.
web_components.dartfile which exports all the annotations provided by this package. Note that in later breaking releases
custom_element_proxy.dartwill likely move into the
srcfolder, so switching to the
web_components.dartimport is recommended.
generateWebComponentsBootstrapmethod to the main
web_componentstransformer file which accepts a
Resolver. You can use this function from any transformer and share the resolver you already have.
ScriptCompactorto not use
=>syntax since it has a declared return type of
void. This could previously cause a checked mode error if the original program returned something from
HtmlImport annotation. This can be added to any library
declaration and it will inject an html import to the specified path into the
head of the current document, which allows dart files to declare their html
dependencies. Paths can be relative to the current dart file or they can be
Note: Html imports included this way cannot contain dart script tags. The mirror based implementation injects the imports dynamically and dart script tags are not allowed to be injected in that way.
Note: Relative urls cannot be used in inlined script tags. Either move
the script code to a Dart file, use a
package: url, or use a normal HTML
import. See https://github.com/dart-lang/web-components/issues/6.
web_components transformer. This should be used in place of the
initialize transformer if that already exists in your application (it will
call that transformer). This will inline html imports (including @HtmlImport
annotations) into the head of your document at compile time, it can be used
transformers: - web_components: entry_points: - web/index.html
entry_points option is supplied then any html file under
test will be treated as an entry point.
registerDartType. In order to use this you will need to be using the
initializepackage, and call its
runmethod from your main function. It is also recommended that you include the transformer from that package to remove the use of mirrors at runtime, see initialize for more information.
platform.jshas been replaced with
webcomponents.js. Also, the default file is now unminified, and the minified version is called
.concat.jsfiles during release mode.
Updated to platform version 0.4.2, internally a deprecated API was removed, hence the bump in the version number.
split dart_support.js in two. dart_support.js only contains what is necessary in order to use platform.js, interop_support.js/interop_support.html can be imported separately when providing Dart APIs for js custom elements.
node. There is no longer a single global observer, but one for each ShadowRoot and one for the main document. The observer that is actually used defaults to the main document, but if
nodeis supplied then it will walk up the document tree and use the first observer that it finds.
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.10.5 <0.11.0"
You can install packages from the command line:
$ pub get
Alternatively, your editor might support pub. Check the docs for your editor to learn more.
Now in your Dart code, you can use:
|0.10.5||Mar 04, 2015||Go to the documentation of web_components 0.10.5||Download web_components 0.10.5 archive|
|0.10.4+2||Feb 27, 2015||Go to the documentation of web_components 0.10.4+2||Download web_components 0.10.4+2 archive|
|0.10.4+1||Feb 27, 2015||Go to the documentation of web_components 0.10.4+1||Download web_components 0.10.4+1 archive|
|0.10.4||Feb 26, 2015||Go to the documentation of web_components 0.10.4||Download web_components 0.10.4 archive|
|0.10.3||Feb 23, 2015||Go to the documentation of web_components 0.10.3||Download web_components 0.10.3 archive|
|0.10.2+1||Feb 18, 2015||Go to the documentation of web_components 0.10.2+1||Download web_components 0.10.2+1 archive|
|0.10.2||Feb 17, 2015||Go to the documentation of web_components 0.10.2||Download web_components 0.10.2 archive|
|0.10.1||Jan 24, 2015||Go to the documentation of web_components 0.10.1||Download web_components 0.10.1 archive|
|0.10.0||Dec 05, 2014||Go to the documentation of web_components 0.10.0||Download web_components 0.10.0 archive|
|0.9.0+1||Nov 13, 2014||Go to the documentation of web_components 0.9.0+1||Download web_components 0.9.0+1 archive|