DOM templating update. #2500

arthurevans · 2018-03-18T19:41:35Z

No description provided.

ghost

reviewing now https://template-arthur-dot-polymer-project.appspot.com/3.0/docs/devguide/dom-template

ghost · 2018-03-26T18:05:54Z

app/3.0/docs/devguide/dom-template.md


 The DOM template is also processed to enable data binding and declarative event handlers.

 ## Specify a DOM template

-Polymer provides three basic ways to specify a DOM template:
+To specify a template, defining a `template` property on the constructor. When extending an 


defining -> define

Apologies in advance for any/most of these being things that I introduced when I updated this chapter... XD

ghost · 2018-03-26T18:06:45Z

app/3.0/docs/devguide/dom-template.md


-### Specify a template using dom-module
+To specif the element's template, define a `template` property on the element's 


specif -> specify

ghost · 2018-03-26T18:08:58Z

oh crud I submitted the review - haven't finished it yet. pls disregard my review until further notice

ghost

2nd of 2 reviews because I accidentally submitted the first one

ghost · 2018-03-26T18:11:56Z

app/3.0/docs/devguide/dom-template.md


-To specify an element's DOM template using a `<dom-module>`:
+The template getter must return an instance of `HTMLTemplateElement`. Use the `html` helper function
+to generate an `HTMLTemplateElement` instance from a JavaScript template literal.


"Use the html helper function to generate..."

Do we need to say where to import it from?

"Import the html helper function from polymer-element.js and use it to generate..."

It's in the sample, but I added a parenthetical here so as not to make the sentence any more complicated than it was... WDYT?

seems fine to me

ghost · 2018-03-26T18:24:27Z

app/3.0/docs/devguide/dom-template.md

+customElements.define('child-class', ChildClass);
+```
+
+[See a working example in Plunker](http://plnkr.co/edit/vS99al?p=preview).


http://plnkr.co/edit/vS99al?p=preview Seems to be a 2.0 sample

Replaced w/ correct sample. (I hope)

ghost · 2018-03-26T18:25:16Z

app/3.0/docs/devguide/dom-template.md

+```js
+import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';
+
+export class BaseClass extends Polymer.Element {


export class BaseClass extends Polymer.Element {

->

export class BaseClass extends PolymerElement {

ghost · 2018-03-26T18:28:25Z

app/3.0/docs/devguide/dom-template.md

-    return `<style>:host { color: blue; }</style>
-       <h2>String template</h2>
-       <div>I've got a string template!</div>`
+export class BaseClass extends Polymer.Element {


export class BaseClass extends Polymer.Element {

->

export class BaseClass extends PolymerElement {

ghost · 2018-03-26T18:32:48Z

app/3.0/docs/devguide/dom-template.md

+* The `html` function checks each expression value. If the expression is an
+  `HTMLTemplateElement`, the `innerHTML` of the template is interpolated. 
+* To protect against XSS vulnerabilities, `html` only interpolates `HTMLTemplateElement`
+  values or template literals tagged with `htmlLiteral`. For information on usign `htmlLiteral` to


usign -> using

ghost · 2018-03-26T18:45:04Z

app/3.0/docs/devguide/dom-template.md

+static get template() {
+  return null;
+}
+```

 ### URLs in templates {#urls-in-templates}


URLs in templates

I think some text needs updating in this section - it references HTML Imports

Yeah, this is still sort of up in the air. I'll add a note here that the section needs to be updated when Polymer/polymer#5163 gets resolved.

ghost · 2018-03-26T18:51:41Z

app/3.0/docs/devguide/dom-template.md

@@ -226,12 +333,14 @@ Example: { .caption }
 <dom-module id="x-custom">


I think we just need the updated script, can html tags be removed?

Yep, fixed.

ghost · 2018-03-26T18:52:19Z

app/3.0/docs/devguide/dom-template.md

@@ -226,12 +333,14 @@ Example: { .caption }
 <dom-module id="x-custom">

  <template>
-    Hello World from <span id="name"></span>!
+
  </template>

  <script>
    class MyElement extends Polymer.Element {


class MyElement extends Polymer.Element {

->

class MyElement extends PolymerElement {

ghost · 2018-03-26T18:53:38Z

app/3.0/docs/devguide/dom-template.md

@@ -251,6 +360,9 @@ use the standard DOM `querySelector`  method.

 ## Remove empty text nodes {#strip-whitespace}


Skipping review of this section

ghost · 2018-03-26T18:54:38Z

app/3.0/docs/devguide/dom-template.md

@@ -338,14 +454,16 @@ This is a fairly rare use case.
 ```html
 <dom-module id="custom-template">


As before, can remove html stuff?

Yep, fixed.

arthurevans · 2018-03-29T23:47:36Z

Updated, PTAL.

DOM templating update.

adacb12

arthurevans requested a review from a user March 18, 2018 19:41

googlebot added the cla: yes label Mar 18, 2018

ghost reviewed Mar 26, 2018

View reviewed changes

ghost suggested changes Mar 26, 2018

View reviewed changes

Addressed feedback.

58474cf

ghost approved these changes Mar 30, 2018

View reviewed changes

Fix typo.

dc793b9

arthurevans merged commit f999d89 into master Mar 30, 2018

arthurevans deleted the template branch March 30, 2018 17:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DOM templating update. #2500

DOM templating update. #2500

arthurevans commented Mar 18, 2018 •

edited by ghost

Loading

ghost left a comment

ghost Mar 26, 2018

ghost Mar 26, 2018

arthurevans Mar 29, 2018

ghost Mar 26, 2018

arthurevans Mar 29, 2018

ghost commented Mar 26, 2018 •

edited by ghost

Loading

ghost left a comment

ghost Mar 26, 2018

arthurevans Mar 29, 2018

ghost Mar 29, 2018

ghost Mar 26, 2018

arthurevans Mar 29, 2018

ghost Mar 26, 2018

arthurevans Mar 29, 2018

ghost Mar 26, 2018

arthurevans Mar 29, 2018

ghost Mar 26, 2018

arthurevans Mar 29, 2018

ghost Mar 26, 2018

arthurevans Mar 29, 2018

ghost Mar 26, 2018

arthurevans Mar 29, 2018

ghost Mar 26, 2018

arthurevans Mar 29, 2018

ghost Mar 26, 2018

ghost Mar 26, 2018

arthurevans Mar 29, 2018

arthurevans commented Mar 29, 2018


		### Specify a template using dom-module
		To specif the element's template, define a `template` property on the element's

		@@ -226,12 +333,14 @@ Example: { .caption }
		<dom-module id="x-custom">

		@@ -251,6 +360,9 @@ use the standard DOM `querySelector` method.

		## Remove empty text nodes {#strip-whitespace}

		@@ -338,14 +454,16 @@ This is a fairly rare use case.
		```html
		<dom-module id="custom-template">

DOM templating update. #2500

DOM templating update. #2500

Conversation

arthurevans commented Mar 18, 2018 • edited by ghost Loading

ghost left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ghost commented Mar 26, 2018 • edited by ghost Loading

ghost left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

URLs in templates

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arthurevans commented Mar 29, 2018

arthurevans commented Mar 18, 2018 •

edited by ghost

Loading

ghost commented Mar 26, 2018 •

edited by ghost

Loading