https://github.com/robdodson/PolymerSnippets
Sublime snippets for Polymer and Web Components
https://github.com/robdodson/PolymerSnippets
Last synced: 4 months ago
JSON representation
Sublime snippets for Polymer and Web Components
- Host: GitHub
- URL: https://github.com/robdodson/PolymerSnippets
- Owner: robdodson
- Created: 2014-03-04T03:32:07.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2018-02-04T11:01:14.000Z (about 8 years ago)
- Last Synced: 2025-05-24T08:37:15.994Z (10 months ago)
- Size: 79.1 KB
- Stars: 222
- Watchers: 26
- Forks: 49
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-custom-elements - PolymerSnippets
- awesome-webcomponents - PolymerSnippets
README
# Polymer Snippets for Sublime
## Install
To install through [Package Control](http://wbond.net/sublime_packages/package_control),
search for **Polymer & Web Component Snippets**. If you still don't have Package Control in Sublime Text, [go get it](http://wbond.net/sublime_packages/package_control/installation).
It's pure awesomeness.
If you don't use Package Control, you can download the package and put it manually inside your `Packages` directory. It should work but will not update automatically.
## Elements
Type the name of [any `iron-*` or `paper-*` element](https://elements.polymer-project.org), then hit `tab` to auto complete. Ex:
OR, start typing the prefix for an element and hit `ctrl+space` to fuzzy search for a completion. Ex:
## Polymer
### [pe] polymer element
```html
:host {
display: block;
}
$2
Polymer({
is: '$1'
});
```
### [pes] polymer element with external stylesheet
```html
$2
Polymer({
is: '$1'
});
```
### [hi] html import *(I use this one a lot)*
```html
```
### [hii] html import iron-* element
```html
```
### [hip] html import paper-* element
```html
```
## Web Components
### [template] template
```html
$0
```
### [ce] custom element
```javascript
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
```html
${1}
$0
```
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
## License
[MIT License](http://robdodson.mit-license.org/) © Rob Dodson