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>
