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="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bpath%2Fto%2Fbower_components%2Fwebcomponentsjs%2Fwebcomponents-lite.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B!--%2520Importing%2520the%2520element%2520assuming%2520file%2520name%2520is%2520also%2520empty-element.html%2520--%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Blink%2520rel%3D%26quot%3Bimport%26quot%3B%2520href%3D%26quot%3Bempty-element.html%26quot%3B%26gt%3B%2520%2520%2520%2520%26lt%3B%2Fhead%26gt%3B%2520%2520%2520%2520%26lt%3Bbody%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bempty-element%26gt%3B%26lt%3B%2Fempty-element%26gt%3B%2520%2520%2520%2520%26lt%3B%2Fbody%26gt%3B%26lt%3B%2Fhtml%26gt%3B%253C%2Fcode"> 
