atom-polymer

Develop for Polymer 1.0+ faster with Atom.

zacharytamas

8,621

24

0.13.0

MIT

GitHub

atom-polymer

Develop for Polymer 1.0+ faster with Atom.

Snippets

Note: The majority of the initial snippets are borrowed from Rob Dodson's excellent polymer-snippets package and adapted for a Polymer 1.0+ world.

HTML imports

[hii] Import Iron element

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

[hip] Import Paper element

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

[hi] Import generic element

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

New element boilerplates

[pe] Polymer element with template and style

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

<dom-module id="$2">
  <template>
    <style>
      :host {
        $5
      }
    </style>
    $4
  </template>
  <span>
    Polymer({
      is: '$2',
      $3
    });
  </span>
</dom-module>

[pen] Polymer element without template

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

<span>
  Polymer({
    is: '$2',
    $3
  });
</span>

[pes] Polymer element with an external script source

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

<dom-module id="$2">
  <template>
    <style>
      :host {
        $5
      }
    </style>
    $4
  </template>
  <span src="$3">
  </span>
</dom-module>

[pet] Polymer element with a template only

This snippet also provides a wrapper div for <content> and a style declaration.

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

<dom-module id="$2">
  <template>
    <style>
      :host {
        $4
      }
      .content-wrapper > ::content {
        $5
      }
    </style>
    $3
    <div class="content-wrapper">
      <content></content>
    </div>
  </template>
</dom-module>

[dom-module] A blank dom-module element

This is handy if you need to add a visual presence to a Polymer element that did not necessarily need it before.

<dom-module id="$1">
  <style>
    :host {
      display: block;
    }
  </style>
  <template>
    $2
  </template>
</dom-module>