<!doctype html>
<html>

<head>

</head>

<body>
  <h2>Standard HTML</h2>
  <div class="carousel">
    <ol class="carousel__indicators">
      <li class="carousel__indicator carousel__indicators--active"></li>
      <li class="carousel__indicator"></li>
      <li class="carousel__indicator"></li>
    </ol>
    <div class="carousel__inner" role="listbox">
      <div class="carousel__item carousel__item--active">
        <img class="carousel__image" src="http://placehold.it/100x50" alt="First slide">
      </div>
      <div class="carousel__item">
        <img class="carousel__image" src="http://placehold.it/100x50" alt="Second slide">
      </div>
      <div class="carousel__item">
        <img class="carousel__image" src="http://placehold.it/100x50" alt="Third slide">
      </div>
    </div>
    <a class="carousel__control carousel__control--prev" href="#" role="button">
      <span class="carousel__control-icon carousel__control-icon--prev" aria-hidden="true"></span>
      <span class="carousel__control-sr">Previous</span>
    </a>
    <a class="carousel__control carousel__control--next" href="#" role="button">
      <span class="carousel__control-icon carousel__control-icon--next" aria-hidden="true"></span>
      <span class="carousel__control-sr">Next</span>
    </a>
  </div>

  <script src="./lib.js"></script>
</body>

</html>
Starting project for Your first Polymer element tutorial. Instructions at:

https://www.polymer-project.org/1.0/docs/start/first-element/intro.html
<!-- import latest release version of all components from polygit -->
<link rel="import" href="https://polygit2.appspot.com/components/polymer/polymer.html">

<dom-module id="p-carousel">
  <template>
    <ol class="carousel__indicators">
      <li class="carousel__indicator carousel__indicators--active"></li>
      <li class="carousel__indicator"></li>
      <li class="carousel__indicator"></li>
    </ol>
    <div class="carousel__inner" role="listbox">
      <content></content>
    </div>
    <a class="carousel__control carousel__control--prev" href="#" role="button">
      <span class="carousel__control-icon carousel__control-icon--prev" aria-hidden="true"></span>
      <span class="carousel__control-sr">Previous</span>
    </a>
    <a class="carousel__control carousel__control--next" href="#" role="button">
      <span class="carousel__control-icon carousel__control-icon--next" aria-hidden="true"></span>
      <span class="carousel__control-sr">Next</span>
    </a>
  </template>
  <script>
  Polymer({
    is: 'p-carousel'
  });
  </script>
</dom-module>
;
(function(window, document) {
  function Cobble() {
    var that = this;
    
    var addModifier = function(modifName) {
      if(!this.hasModifier(modifName)) {
        this.htmlElement.className += ' ' + this.className + '--' + modifName;
      }
      
      return this;
    };
    
    var removeModifier = function(modifName) {
      var modifClassRegex = new RegExp('(\\s|^)' + this.className + '--' + modifName + '(\\s|$)');
      this.htmlElement.className = this.htmlElement.className.replace(modifClassRegex, ' ');
      
      return this;
    };
    
    var hasModifier = function(modifName) {
      var modifClassName = ' ' + this.className + '--' + modifName + ' ';
      return ((" " + this.htmlElement.className + " ").replace(/[\t\r\n\f]/g, " ").indexOf(modifClassName) > -1) 
    };
    
    function Block(blockName, htmlElem) {
      this.name = this.className = blockName;
      this.htmlElement = htmlElem;
      
      this.elements = function(elemName) {
        var elemClass = '[class^="' + blockName + '__"],[class*=" ' + blockName + '__"]';
        if(elemName) {
          elemClass = '.' + blockName + '__' + elemName;
        }
        var htmlElems = document.querySelectorAll(elemClass);
        var htmlElemsLength = htmlElems.length;
        var elems = [];
  
        for (var htmlElemIndex = 0; htmlElemIndex < htmlElemsLength; htmlElemIndex++) {
          elems.push(new Element(this, elemName, htmlElems[htmlElemIndex]))
        }
        
        return elems;
      };

    }
    
    Block.prototype.addModifier = addModifier;
    Block.prototype.hasModifier = hasModifier;
    Block.prototype.removeModifier = removeModifier;
    
    function Element(block, elemName, htmlElem) {
      this.block = block;
      this.name = elemName;
      this.htmlElement = htmlElem;
      this.className = block.name + '__' + this.name;
    }
    
    Element.prototype.addModifier = addModifier;
    Element.prototype.hasModifier = hasModifier;
    Element.prototype.removeModifier = removeModifier;
    
    this.create = function(name, config) {
      config = config || {};
      var elements = document.getElementsByClassName(name);
      var elementsLength = elements.length;
  
      for (var elementIndex = 0; elementIndex < elementsLength; elementIndex++) {
        if(typeof config.created === 'function') {
          config.created(new Block(name, elements[elementIndex]));
        }
      }
    }
    
    return this.create;
  };

  window.Cobble = new Cobble();
}(window, document));

Cobble('carousel', {
  created: function(block) {
    console.log(block.elements());
  }
});