Be cool and use Polymer and Ember together! This addon integrates Polymer with Ember, so you can use the power of custom web components in your ember apps today.
This addon has been updated to for Polymer 2.0! Still want 1.0? Check out the 1.x branch.
Why use Polymer? You might ask. By using Polymer you actually choose to embrace the native Web Components specification, not necessarily Polymer itself. Polymer is only just a thin layer over the Custom Elements v1 specification, providing some syntactic sugar as well as compatibility. Every framework will eventually end up implementing this specification somehow, simply because using native is faster.
Polymer enables you to use any element on webcomponents.org, opening up the world to lots of other good quality components besides the ones on emberaddons.com.
ember install ember-cli-polymer-bundler
To use a custom element, just install it through bower.
bower install PolymerElements/paper-button --save
Done! ember-cli-polymer-bundler identifies this package as a custom element and imports it automatically! ✨ You can now use the element:
Polymer's elements should just work with one-way bindings:
However, for two-way bindings we will need to encapsulate the elements in an Ember Component. Exactly this is what the ember-polymer-paper addon is for!
This addon forces Polymer to use Shadow DOM. Browsers that do not natively support Shadow DOM will be supplied with the polyfill. Note that this polyfill might result in slightly slower rendering.
If an element is not automatically imported, it probably does not follow the polymer naming conventions. To import it, create
/app and import the element:
The addon can be configured in
ember-cli-build.js as such:
Indicates whether elements should be imported automatically. ember-cli-polymer-bundler automatically imports elements from bower and npm packages which have the
web-components keyword and a valid html import entry point. All elements at customelements.io should be compatible.
Disable if you want full control over imports yourself. Defaults to
A list with names of bower- or npm packages to exclude during auto element import. Comes in handy when you only want to manually import one specific file from a package, but not the entire element.
File to put html imports in. If you do not have manual imports and are using
autoElementImport, the file is not necessary.
Allows to apply autoprefixer to the styles found in the bundled html.
true to activate this feature.
autoprefixer:browsers: 'last 2 versions'enabled: truecascade: false
browsers are not set, the application build targets are used.
The output file produced by polymer-bundler for all bundled html code and styling.
The polyfill bundle to use. Can be one of
none for no polyfills. See the webcomponentsjs how-to-use page.
Allows you to set global Polymer Settings as described in the Global Polymer settings article.
Defaults to ``.
Allows to set the
rel attribute of the bundle import tag to "lazy-import" instead of "import" to prevent downloading the bundle.
Builds the bundled file using
build property accepts an object with the same options for a build using
This addon was sponsored by Fabriquartz, a startup based in The Netherlands.