Re: Component Model f2f: Actionable things

On Sun, Nov 6, 2011 at 2:01 PM, Cameron McCormack <cam@mcc.id.au> wrote:

> Would you be able to post the code from the blog post comment example?
>

Here it is what you saw, with some irrelevant parts removed. Just to set
expectations: this was already two months old, so it lags our current
thinking somewhat.

  <template id="commentTemplate">
    <div class="holder">
      <style scoped>
        img { border: 1px solid black; margin-bottom: 1em; float: left; }
        .text { margin-left: 71px; }
        .holder { clear: left; margin-bottom: 1em; }
      </style>
      <img class="avatar" alt="avatar">
      <div class="text">
        <content></content>
      </div>
    </div>
  </template>

  <script>
    function Comment(text) {
        HTMLElement.call(this); // Makes this an Element

        this.textContent = text || 'Lorem impsum ...';

        var shadow = new ShadowRoot(this); // Give us a Shadow
        this.buildUI(shadow);
    }

    Comment.prototype = Object.create(HTMLElement.prototype);

    Comment.prototype.constructor = Comment;

    Comment.prototype.buildUI = function(shadow) {
        var holder =
document.getElementById('commentTemplate').firstElementChild.cloneNode(true);
        shadow.appendChild(holder);

        holder.querySelector('.avatar').src = 'avatar' +
Math.floor(Math.random() * 5) + '.jpg';
    };

    HTMLElement.register('x-comment', Comment);

    function post(text) {
        var comments = document.querySelector('#comments');
        comments.insertBefore(new Comment(text), comments.firstChild);
    }
  </script>

  <h2>Comments</h2>
  <div id="comments">
    <x-comment>
  </div>