Go to atom > Preferences...
then search for Polymer Snippets in the Install
tab.
Note: Restarting Atom might be required for the snippets to show in the auto-complete menu.
If you have Emmet installed it will clobber the tab completion for HTML snippets. You can follow this workaround to get Polymer snippets working again.
Type the name of any iron-*
or paper-*
element, then hit tab
to auto complete. Ex:
<dom-module id="${1}"><template><style>:host {display: block;}</style>$2</template><script>Polymer({is: '$1'});</script></dom-module>
<dom-module id="${2}"><template><style>:host {display: block;}</style></template><script>(function (Polymer) {'use strict';class ${1} {beforeRegister() {this.is = '${2}';this.properties = {${3}};}attached() {}}Polymer(${1});})(Polymer);</script></dom-module>
<dom-module id="$1"><link rel="import" type="css" href="$1.css"><template>$2</template><script>Polymer({is: '$1'});</script></dom-module>
$2Behavior = {properties: {$3}};
$2BehaviorImpl = {properties: {$3}};$2Behavior = [$2BehaviorImpl];
<dom-module id="${1:shared-styles}"><template><style>$0</style></template></dom-module>
<style ${1:is="custom-style"} include="${0:shared-styles}"></style>
<array-selector id="${1:selector}"items="{{${2:array}}}" selected="{{${3:selected}}}"${4:multi} ${5:toggle}></array-selector>
<template is="dom-if" if="$1"${2: restamp="true"}>$0</template>
<template is="dom-repeat" items="$1"${2: index-as="index"}>$0</template>
<template is="dom-bind">$0</template>
<script src="${0:bower_components}/webcomponentsjs/webcomponents-lite.js"></script>
// Load Web Components when not supportedvar webComponentsSupported = ('registerElement' in document&& 'import' in document.createElement('link')&& 'content' in document.createElement('template'));if (!webComponentsSupported) {var script = document.createElement('script');script.src = '${0:bower_components}/webcomponentsjs/webcomponents-lite.js';document.head.appendChild(script);}
<link rel="import" href="${1:bower_components}/${0}/${0}.html">
<link rel="import" href="${1:bower_components}/iron-${2}/iron-${2}.html">
<link rel="import" href="{1:bower_components}/paper-$2/paper-$2.html">
<template$1>$0</template>
var ${4:tmpl} = document.querySelector('${5:template}');var ${1:WidgetProto} = Object.create(HTMLElement.prototype);${1:WidgetProto}.createdCallback = function() {var root = this.createShadowRoot();root.appendChild(document.importNode(${4:tmpl}.content, true));};var ${2:Widget} = document.registerElement('${3:my-widget}', {prototype: ${1:WidgetProto}});
<!DOCTYPE html><html><head><meta charset="utf-8"><title>${1}</title><meta name="description" content="${2}"><!-- Mobile --><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><!-- Chrome / Android --><meta name="mobile-web-app-capable" content="yes"><meta name="theme-color" content="black"><link rel="icon" href="icon.png"><!-- Safari / iOS --><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png"><!-- Web Components --><script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script></head><body unresolved>$0</body></html>
<!DOCTYPE html><html><head><meta charset="utf-8"><title>${1}</title><meta name="description" content="${2}"><!-- Mobile --><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><!-- Chrome / Android --><meta name="mobile-web-app-capable" content="yes"><meta name="theme-color" content="black"><link rel="icon" href="icon.png"><!-- Safari / iOS --><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png"><!-- Check if Web Components are supported--><script>var webComponentsSupported = ('registerElement' in document&& 'import' in document.createElement('link')&& 'content' in document.createElement('template'));if (!webComponentsSupported) {var script = document.createElement('script');script.src = 'bower_components/webcomponentsjs/webcomponents-lite.js';document.head.appendChild(script);}</script></head><body unresolved>$0</body></html>
git checkout -b my-new-feature
git commit -m 'Add some feature'
git push origin my-new-feature
MIT License © Rob Dodson
Good catch. Let us know what about this package looks wrong to you, and we'll investigate right away.