Polymer Snippets for Atom

Install

Go to atom > Preferences... then search for Polymer Snippets in the Install tab.

Compatibility with Emmet

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.

Elements

Type the name of any iron-* or paper-* element, then hit tab to auto complete. Ex:

Polymer

[pe] polymer element

<dom-module id="${1}">
  <style>
    :host {
      display: block;
    }
  </style>
  <template>
    $2
  </template>
  <script>
    Polymer({
      is: '$1'
    });
  </script>
</dom-module>

[pes] polymer element with external stylesheet

<dom-module id="$1">
  <link rel="import" type="css" href="$1.css">
  <template>
    $2
  </template>
  <script>
    Polymer({
      is: '$1'
    });
  </script>
</dom-module>

[hi] html import

<link rel="import" href="${1:bower_components}/${0}/${0}.html">

[hii] html import iron-* element

<link rel="import" href="${1:bower_components}/iron-${2}/iron-${2}.html">

[hip] html import paper-* element

<link rel="import" href="{1:bower_components}/paper-$2/paper-$2.html">

Web Components

[template] template

<template$1>$0</template>

[ce] custom element

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}
});

HTML

[ph] HTML template with Web Components polyfill

<!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>

Contributing

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -m 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request :D

deeFive / Atom-PolymerSnippets