polymer-1.0Aan de slag met polymeer-1.0


Opmerkingen

  • Het bovenstaande voorbeeld toont een minimale minimumstructuur van een aangepast (polymeer) element met behulp van lokale dom.
  • Een polymeerelement kan ook volledig worden gemaakt met behulp van een script , maar dat maakt geen deel uit van dit onderwerp.
  • Hoewel style tag geen deel uitmaakt van een minimale structuur, is het daar bewaard om het te begrijpen.
  • Ook kan script-tag zowel op gebiedende als op declaratieve wijze worden gebruikt, dwz dat de gebruiker een apart js bestand kan hebben met ten minste boven de geschreven code en het vervolgens in element kan doorverwijzen.
  • Houd er rekening mee dat de id van dom-module en is eigendom van Polymer constructor moet altijd hetzelfde zijn.

versies

Versie Publicatiedatum
v1.6.0 2016/06/29
v1.5.0 2016/05/31
v1.4.0 2016/05/18
v1.0.0 2015/05/27

Element structuur

Een element zonder inhoud definiëren.

<dom-module id="empty-element">
  <template>
    <style>
    </style>
  </template>

  <script>
    Polymer({
      is: 'empty-element',
    });
  </script>
</dom-module>
 

En dan kunt u het nieuwe element op elke andere pagina gebruiken.

<!DOCTYPE html>
<html>
    <head>
        <!-- Using lite version as Polymer does not require Polyfill for Shadow Dom -->
        <script src="path/to/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
        <!-- Importing the element assuming file name is also empty-element.html -->
        <link rel="import" href="empty-element.html">
    </head>

    <body>
        <empty-element></empty-element>
    </body>
</html>