demo.html

<!doctype html>
<html>
<head>
  <meta name="asq-elements" content="width=device-width, initial-scale=1, user-scalable=no">

  <title>asq-stem</title>

  <script src="../webcomponentsjs/webcomponents.js"></script>

  <link href="asq-stem.html" rel="import">

  <style shim-shadowdom>
    body {
      font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
      font-size: 14px;
      margin: 0;
      padding: 24px;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      -webkit-touch-callout: none;
    }
    section {
      padding: 20px 0;
    }


  </style>

</head>
<body>

  <section>

   <asq-stem><h1>An asq stem element.</h1></asq-stem>
   <asq-stem><h3>An asq stem element.</h3></asq-stem>
   <asq-stem><p>An asq stem element.</p></asq-stem>

  </section>
  
  <script>
    window.onmessage = function(e){
      if (typeof e.data.role == "string" && e.data.role.length > 0) {
        var allAsqElements = document.querySelectorAll('html /deep/ *');
        allAsqElements = Array.prototype.slice.call(allAsqElements).filter(function(el) {
          return isASQEl(el);
        });

        //set role for every asq-element in this page
        allAsqElements.forEach(function(elem, index) {
          elem.role = e.data.role;
        });
      }

      function isASQEl(el) {
        return el.localName.indexOf('asq-') != -1;
      } 
    };
  </script>


</body>
</html>