Polymer - Assign a default value to a content tag

Asked

Viewed 112 times

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 to the attribute src of the element <content select="img"> I added the script:

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

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

javascript polymer

1 answer

1

João Paulo, I do not believe it is good practice to change the content of the "Insertion point" from its component because it destroys the encapsulation. The "Insertion point" serves to implement dependency injection and allow 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 breaking the principle of encapsulation that Polymer proposes to provide in your framework.

Anyway follow 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>

Browser other questions tagged javascript polymer

You are not signed in. Login or sign up in order to post.