First Polymer Application-(2) create your own elements

Original article: Step 2: your own element
Translated on: February 1, July 6, 2014
Translated by: Tie

Through the learning and practice in the previous section, you have completed a basic application structure. From now on, you can build a tab (card element) to display the business card (post ). The completed tab includes the profile picture, name, red-hearted button, and content area:
Picture a little bit of water (flat ?) Skin freezing
In this section, you will create <Post-card>Element, used to control the layout and style of its sub-elements. After the sub-elements are completed, they can be used like other labels used previously. The called code looks like the following:

<Post-card>  <H2> ianchor </H2> 

Through this section, you will:



 

 
  
Learn how to create custom elements in Polymer
 
  
Have a certain understanding of shadow Dom.

 
Learn more:

The Shadow DOM technology allows you to add a local DOM tree to a DOM element, the Style and label of this local Dom are independent from the global web page (no pollution or impact, the original article is called decoupling and Decoupled ). for more information about shadow Dom, see shadow Dom polyfill docs. you can also refer to this Chinese document: Use shadow Dom to create Web components.




Edit post-card.html files

Go to the starter directory under the root directory and open it in the editor.
Post-card.htmlFile, which contains the basic skeleton (skeleton) of a custom element. Import the other two components at the beginning of the file:


<link rel="import"   href="../components/polymer/polymer.html"><link rel="import"   href="../components/core-icon-button/core-icon-button.html">
Description:



 

 
  
As mentioned in the previous section<LINK rel = "import">Used to introducePost-cardOther elements.

 

Next is the definition of the element itself:


<Polymer-element name = "post-card"> <template> <style>: host {display: block; position: relative; Background-color: White; padding: 20px; width: 100%; font-size: 1.2rem; font-weight: 300 ;}. card-header {margin-bottom: 10px ;}</style> <! -- Card contents go here --> <! -- Put the card content here --> </template>...
Description:



 

 
  
<Polymer-element>The element is a method for customizing new elements in polymer. Here, the element you created is "post-card ".
 
  
<Template>Defines the internal Dom structure of the element, or the shadow Dom. Here is where the custom element tag (markup) is added.
 
  
: HostThe pseudo class is used in the shadow DOM tree to match the host element mounted to the Shadow DOM tree (the host has the meaning of the host). Here, it matches<Post-card>Element.
 
  
In the Shadow Dom, the scope of the common CSS selector is only within the shadow Dom.. Card-HeaderOnly the shadow Dom of this element is matched.

 
<Polymer-element>Labels can only be
Direct Child ElementThis level contains one
<Template>Tag. <template> the tag defines the shadow Dom of the element.
<Template>Internal, allows nesting of other
<Template>Label.




  <script>    Polymer({});  </script>
Description:



 

 
  
At the end of the filePolymerMethod call registers this element to the browser so that the browser remembers it. You will also deal with this function in the following sections.

 


Learn more:

Create
<Post-card>Its shadow dom
<Template>The content is inserted into the shadow root of the element. These elements will be displayed in the browser (rendered, rendering), but not included in the host Element
ChildrenCollection.

If there are no other settings, the child elements added by all users will not be rendered/displayed (render ). For example:


<Post-card> A
<H3>Element as the sub-node
<Post-card>. If you want to display
<Post-card>Internal
<H3>You need to add a nsertion point to tell the browser where to render the child element to the Shadow DOM tree.



Bytes -------------------------------------------------------------------------------------




Create a card structure)



Find the comment at the end of <template> and add the following
<Div>And
<Content>Tag to the code.


  <!-- CARD CONTENTS GO HERE -->  <div class="card-header" layout horizontal center>    <content select="img"></content>    <content select="h2"></content>  </div>  <content></content>
Description:



  

 
   
Layout horizontal centerAttribute is a quick way to create a flexbox (scaling) Layout in polymer.
 
   
3<Content>The element creates some insertion points. The shadow Dom Naming Convention (CALL) matches the node in the distributed process ).
 
   
AllThe child element matches the first one.<Content>Mark and insert it to it.
 
   
Second<Content>Mark all selectedH2Child element.
 
   
Last<Content>Tag, not specifiedSelectProperties. All nodes that have not been inserted are selected. (This should be<Content>The most common format of the element ).

  

Bytes -------------------------------------------------------------------------------------




Set a style for the introduced content



You can use many new CSS selectors.
Post-card.htmlThe file already contains
: HostSelector, used
<Post-card>Set the style of the element.

To set and use
<Content>The style of the added child element can be found in
<Style>Add the following CSS style to the label:


  polyfill-next-selector { content: ‘.card-header h2‘; }  .card-header ::content h2 {    margin: 0;    font-size: 1.8rem;    font-weight: 300;  }  polyfill-next-selector { content: ‘.card-header img‘; }  .card-header ::content img {    width: 70px;    border-radius: 50%;    margin: 10px;  }
Description:



  

 
   
Pseudo class: ContentSelect<Content>Tag created) insert point. Here,: Content H2Match All distributed by the insert pointH2Element.
 
   
For browsers that do not support shadow Dom,Polyfill-next-SelectorThe rule tells the shadow Dom polyfill how: ContentRules are converted to non-shadow Dom rules. For example, when shadow Dom is not supported,Post-card H2Match All<H2>Label.

  
Note:: You cannot set the style for the insert point, so use
: ContentMust be accompanied by the descendant selector.




Edit the index.html File

Introduce new elements into index.html



Save
Post-card.htmlAnd open
Index.htmlAdd the preceding import statement after the existing imports statement:


  <link rel="import" href="post-card.html">
Description:



  

 
   
InIndex.htmlYou can use<Post-card>Element.

  
Bytes -------------------------------------------------------------------------------------



In
Index.htmlFile,
<Core-toolbar>Add
<Post-card>Element:


... </Core-toolbar> <Div class = "Container" layout vertical center> <post-card>  <H2> Desert poor autumn </H2> 
Description:

The sub-elements specified here will be distributed
<Post-card>Each insert point of the element.




Test Results



Save the file (it is recommended to save it at any time during the editing process. This is a good coding habit), deploy the file, and use chrome to open the link or refresh the page, for example:

Http: // localhost: 8080/polymer-tutorial-master/starter/index.html

The result is as follows:

Figure Step 2 shows the effect after completion.

The favorite button is missing, but it looks a bit like it at least.


If an error occurs or is not displayed, you canIndex.html, post-card.htmlFile comparison, of course, you can also directly access these two files to try the effect.
If the tab width on your page is not enough, adjust the width attribute in the style by yourself, which may be part of the media selector.


Practice:

We recommend that you try to insert points and see how they work. If
Index.htmlChanged
<Post-card>What is the difference between the subelement order? What if I include multiple images or add plain text? You can also try to exchange
Post-card.htmlTwo
Select =Attribute.




Next section

First Polymer Application-(3) Use Data Binding