Polymer - Assign a default value for a content tag

Question

Polymer - Assign a default value for a content tag

Navigation

#1 by (1 votes)

1

I'm creating a Polymer element with this structure:

  <template>

    <style>
      ...
    </style>

    <div class="card-header" layout horizontal center>
      <content select="img"></content>
      <content select="h1"></content>
    </div>
    <content></content>

  </template>

  <script>

    Polymer({});

  </script>
</polymer-element>

To assign a default value for the src attribute of the <content select="img"> element I added the script:

Polymer({
   srcimg: 'default-picture.png'
});

When rendered in the browser the attribute is populated in the shadow DOM but not in the <img> element within the <e-card> element. How to make the <img> element assume the value assigned by the script if it is not deliberately assigned?

javascript polymer

asked by anonymous 07.01.2015 / 21:45

1 answer

Picking Location from a POST Add selected values from a checkbox

score 1 · Answer 1

John Paul, I do not think it's a good practice to change contents of the insertion point from your component as this destroys the encapsulation. The insertion point serves to implement dependency injection and allows the client to specify content to be inserted at defined points in the component layout. Surely there must be another way to implement what you want without hurting the encapsulation principle that Polymer proposes to provide in your framework.

In any case, it follows the code to access and manipulate the image by replacing the value of the src attribute.

OBS: I tested only on GoogleChrome

What you need is this script:

<script>
  Polymer('my-element', {
    srcimg: 'img/network_workgroup.svg',
    ready: function() {
      var myEl = document.querySelector('my-element > img');
      myEl.src = this.srcimg;
    }
  });
</script>

The complete code appears below:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <script src="../webcomponentsjs/webcomponents.min.js"></script>
  <link rel="import" href="../polymer/polymer.html">
</head>

<body fullbleed layout vertical>

  <polymer-element name="my-element" attributes="">
    <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;
      }
      polyfill-next-selector { content: '.card-header h5'; }
      .card-header ::content h5 {
        margin: 0;
        font-size: 0.8rem;
        font-weight: 300;
        color: red;
        font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-style: italic;
        font-weight: bold;
      }
      polyfill-next-selector { content: 'h2'; }
      ::content h2 {
        font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        background-color: teal; 
        color: white; 
        padding: 5px 5px;
      }
      </style>

      <div class="card-header">
        <content select="img"></content>
        <br />
        <content select="h5"></content>
      </div>
      <hr />
      <div style="color: gold">
        <content></content>
        Finalização do Componente - Footer
        <hr />
      </div>

    </template>
    <script>
      Polymer('my-element', {
        srcimg: 'img/network_workgroup.svg',
        ready: function() {
          var myEl = document.querySelector('my-element > img');
          myEl.src = this.srcimg;
        }
      });
    </script>
  </polymer-element>

  <my-element>
    <h2>Teste do Elemento</h2>
    <h5>fig. 1 - network workgroup example</h5>
    <img src="" width="200px" height="200px"></img>
  </my-element>

  <script>
    document.addEventListener('polymer-ready', function(e) {
      // se necessário faça tratamento adicional no cliente do componente
    });
  </script>

</body>
</html>