Go to atom > Preferences... then search for Polymer Snippets in Packages tab.
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 core-* or paper-* element, then hit tab to auto complete. Ex:
<polymer-element name="${2}" attributes="${3}">
<template>
<style>
:host {
display: block;
}
</style>$4
</template>
<script>
Polymer({
});
</script>
</polymer-element><polymer-element name="${2}" noscript>
<template>
<style>
:host {
display: block;
}
</style>$4
</template>
</polymer-element><polymer-element name="$1" attributes="$2">
<template>
<link rel="stylesheet" href="$3.css">$4
</template>
<script>
Polymer({
$5
});
</script>
</polymer-element><link rel="import" href="${0}"><link rel="import" href="${1:bower_components}/core-${2}/core-${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>
if ('registerElement' in document
&& 'createShadowRoot' in HTMLElement.prototype
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')) {
// Native WC support. Do nothing
} else {
document.write('<script src="/bower_components/webcomponentsjs/webcomponents.js"><\/script>');
}
</script>
</head>
<body unresolved>
$0
</body>
</html>::shadow ${2:target} {
$0
}/deep/ ${2:target} {
$0
}${1:content}::content ${2:target} {
$0
}:host$0:host-context($0)polyfill-next-selector { content: '${1::host > .foo}'; }$0- 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
MIT License © Rob Dodson