Introducing Web Components

9d9f17e37b751b9f83081ba3dd44bab4?s=47 Peter Gasston
September 24, 2013

Introducing Web Components

SmartWeb conference, 24th September 2013.

9d9f17e37b751b9f83081ba3dd44bab4?s=128

Peter Gasston

September 24, 2013
Tweet

Transcript

  1. 7.
  2. 9.
  3. 12.
  4. 18.
  5. 24.
  6. 25.

    .foo { color: #00f; } The problem <div class="foo"> …

    </div> div.foo { color: #f00; } <div class="foo"> … </div>
  7. 28.
  8. 44.

    Templates + Shadow DOM var newRoot = $(foo).createShadowRoot(), clone =

    $(bar).content.cloneNode(true), newRoot.innerHTML = clone;
  9. 48.

    Templates + Shadow DOM var newRoot = $(foo).createShadowRoot(), newEl =

    document.createElement('content'); newRoot.innerHTML = newEl;
  10. 49.
  11. 51.
  12. 70.
  13. 71.

    The part attribute var newRoot = el.createShadowRoot(), newEl = '<h2

    part="apes">…</h2>'; newRoot.appendChild(newEl);
  14. 73.
  15. 75.

    <p>Hello</p> <div> <style scoped> p { color: #f00; } </style>

    <p>World!</p> </div> <p>Again</p> Scoped styles
  16. 85.

    Shadow DOM Shadow DOM API Templates HTML imports Custom elements

    Scoped styles Custom properties Browser support