polymer-1.0 Getting started with polymer-1.0
Remarks
- The example above shows bare minimum structure of a custom(Polymer) element using local dom.
- A Polymer element can also be created entirely using
scripttag, but that is not part of this topic. - Even though
styletag is not a part of bare minimum structure it has been kept there just for understanding purpose. - Also, script tag can be used in both imperative and declarative fashion i.e user can have a separate
jsfile with atleast above written code and then refer it in element. - Please note that
idofdom-moduleandisproperty ofPolymer constructorshould always be same.
Versions
| Version | Release Date |
|---|---|
| v1.6.0 | 2016-06-29 |
| v1.5.0 | 2016-05-31 |
| v1.4.0 | 2016-05-18 |
| v1.0.0 | 2015-05-27 |
Element structure
Defining an element with no content.
<dom-module id="empty-element"> <template> <style> </style> </template> <script> Polymer({ is: 'empty-element', }); </script> </dom-module> And then you can use the new element in any other pages.
<!DOCTYPE html> <html> <head> <!-- Using lite version as Polymer does not require Polyfill for Shadow Dom --> <script src="path/to/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> <!-- Importing the element assuming file name is also empty-element.html --> <link rel="import" href="empty-element.html"> </head> <body> <empty-element></empty-element> </body> </html> 
