W3C home > Mailing lists > Public > public-webapps@w3.org > October to December 2011

Re: Component Model f2f: Actionable things

From: Dominic Cooney <dominicc@google.com>
Date: Mon, 7 Nov 2011 11:55:55 -0800
Message-ID: <CAHnmYQ_hwvtGerMTuU6yygtS6az4OFxVRghtsOd4WtA69oFfYw@mail.gmail.com>
To: Cameron McCormack <cam@mcc.id.au>
Cc: public-webapps@w3.org, dglazkov@chromium.org
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>
Received on Monday, 7 November 2011 19:56:24 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 18:49:48 GMT