Kapselung in HTML

Vier Spec-Entwürfe des W3C

• HTML Templates
• Custom Elements
• Shadow DOM
• HTML Imports

HTML Templates

<template id="bookshelf">
  <img src="" alt="" style="border: 1px solid red">
</template>

• neues HTML-Element template
• wird vom Browser in den DOM geladen,
  aber nicht angezeigt

Custom Elements

• mit JavaScript können neue Elementnamen
  registriert werden
• Unterscheidung von Standard-HTML-
  Elementnamen: Minus im Namen - (-)
• Falsch: fotoalbum, fotoAlbum, foto:album
  Richtig: foto-album

Shadow DOM

• Light DOM ist durch JavaScript manipulierbar
• Shadow-DOM-Wurzelknoten wird im
  Light DOM erzeugt
• CSS und HTML im Shadow DOM
  nicht manipulierbar

HTML Imports

link-Element im HTML head

<link rel="import" href="document.html">

Beispiele

<qr-code> von Eduard Castellano

Mozilla X-Tags

Mozilla X-Tags

<brick-tabbar id="demo-bar">
      <brick-tabbar-tab target="a" selected>
        Camera
      </brick-tabbar-tab>
      <brick-tabbar-tab target="b">
        Messages
      </brick-tabbar-tab>
      <brick-tabbar-tab target="c">
        Home
      </brick-tabbar-tab>
    </brick-tabbar>

Mozilla X-Tags

Mozilla Brick

Google Polymer Project

Google Polymer Project

<google-chart
  type='geo'
  height='300px'
  width='400px'
  data='[["Country", "Popularity"],
  	["Germany", 200],
  	["United States", 300],
  	["Brazil", 400],
  	["Canada", 500],
  	["France", 600],
  	["RU", 700]]'>
</google-chart>

Google Polymer Project

Google Web Components