Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use correct Dom capitalization in Primer doc #1222

Merged
merged 1 commit into from
Feb 26, 2015
Merged

Use correct Dom capitalization in Primer doc #1222

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 25 additions & 25 deletions PRIMER.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -453,7 +453,7 @@ Example:
<a name="dom-api"></a>
## DOM API

Polymer provides custom API for manipulating dom such that local DOM and light DOM trees are properly maintained. An element has a `lightDOM` property and a `localDOM` each of which are used to manipulate their respective dom trees. The following methods are provided:
Polymer provides custom API for manipulating dom such that local DOM and light DOM trees are properly maintained. An element has a `lightDom` property and a `localDom` each of which are used to manipulate their respective dom trees. The following methods are provided:

* appendChild(node)
* insertBefore(node, ref_node)
Expand All @@ -466,12 +466,12 @@ Example:

```html
var toLight = document.createElement('div');
this.lightDOM.appendChild(toLight);
this.lightDom.appendChild(toLight);

var toLocal = document.createElement('div');
this.localDom.insertBefore(toLocal, this.localDom.children()[0]);

var allSpans = this.localDOM.querySelectorAll('span');
var allSpans = this.localDom.querySelectorAll('span');
```

For manipulating dom in elements that themselves do not have local dom, the above api's support an extra argument which is the container `node` in which the operation should be performed.
Expand All @@ -489,20 +489,20 @@ Example:
...

var insert = document.createElement('div');
this.localDOM.insertBefore(insert, this.$.first, this.$.container);
this.localDom.insertBefore(insert, this.$.first, this.$.container);

```

**NOTE:** It's only strictly necessary to use `lightDOM/localDOM` when performing dom manipulation on elements whose composed dom and local dom is distinct. This includes elements with local dom and elements that are parents of insertion points. It is recommended, however, that `lightDOM/localDOM` be used whenever manipulating element dom.
**NOTE:** It's only strictly necessary to use `lightDom/localDom` when performing dom manipulation on elements whose composed dom and local dom is distinct. This includes elements with local dom and elements that are parents of insertion points. It is recommended, however, that `lightDom/localDom` be used whenever manipulating element dom.

When multiple dom operations need to occur at once time, it's more efficient to batch these operations together. A batching mechanism is provided to support this use case.

Example:

```html
this.localDOM.batch(function() {
this.localDom.batch(function() {
for (var i=0; i<10; i++) {
this.localDOM.appendChild(document.createElement('div'));
this.localDom.appendChild(document.createElement('div'));
}
});

Expand Down Expand Up @@ -627,7 +627,7 @@ Example:
listeners: {
'click': 'handleClick'
},

handleClick: function(e) {
alert("Thank you for clicking");
}
Expand Down Expand Up @@ -1032,7 +1032,7 @@ Polymer provides an alternate binding annotation syntax to make it explicit when
<template>

<!-- Attribute binding -->
<my-element selected$="{{value}}"></my-element>
<my-element selected$="{{value}}"></my-element>
<!-- results in <my-element>.setAttribute('selected', this.value); -->

<!-- Property binding -->
Expand All @@ -1053,19 +1053,19 @@ In specific cases, it may be useful to keep an HTML attribute value in sync with
```html
<script>
Polymer({

published: {
response: {
type: Object,
reflect: true
}
},

responseHandler: function(response) {
this.response = 'loaded';
// results in this.setAttribute('response', 'loaded');
}

});
</script>
```
Expand All @@ -1086,11 +1086,11 @@ Polymer supports virtual properties whose values are calculated from other prope

<script>
Polymer({

is: 'x-custom',

computed: {
// when `first` or `last` changes `computeFullName` is called once
// when `first` or `last` changes `computeFullName` is called once
// (asynchronously) and the value it returns is stored as `fullName`
fullName: 'computeFullName(first, last)',
},
Expand All @@ -1115,21 +1115,21 @@ When a property only "produces" data and never consumes data, this can be made e
```html
<script>
Polymer({

published: {
response: {
type: Object,
readOnly: true,
notify: true
}
},

responseHandler: function(response) {
this._setResponse(response);
}

...

});
</script>
```
Expand Down Expand Up @@ -1220,13 +1220,13 @@ TL;DR: When binding to camel-cased properties, use "dash-case" attribute names t

Example: bind `this.myValue` to `<x-foo>.thatValue`:

BEFORE: 0.5
BEFORE: 0.5

```html
<x-foo thatValue="{{myValue}}"></x-foo>
```

AFTER: 0.8
AFTER: 0.8

```html
<x-foo that-value="{{myValue}}"></x-foo>
Expand All @@ -1247,13 +1247,13 @@ In the meantime, styling should be done against the composed tree, meaning:

```html
<dom-module id="x-foo">

<style>
x-foo .my-class {
...
}
</style>

<template>
...
</template>
Expand Down Expand Up @@ -1295,9 +1295,9 @@ Example:

<script>
Polymer({

is: 'x-parent',

bind: {
isManager: 'computeShouldDisableDebounced',
mode: 'computeShouldDisableDebounced',
Expand Down