Skip to content

Commit

Permalink
Merge pull request #1222 from Polymer/local-dom-cap
Browse files Browse the repository at this point in the history
Use correct `Dom` capitalization in Primer doc
  • Loading branch information
kevinpschaaf committed Feb 26, 2015
2 parents 6976b0c + f3d41e6 commit 2735c8a
Showing 1 changed file with 25 additions and 25 deletions.
50 changes: 25 additions & 25 deletions PRIMER.md
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

0 comments on commit 2735c8a

Please sign in to comment.