Dynamiska användargränssnitt

HTML standarden innehåller APIer som låter oss själva definiera nya typer av element

• Custom Elements

  • Egna attribut
  • Child-element
  • Styling baserat på internt state

• Shadow DOM

  • Låter oss dölja innanmätet av ett custom element från javascript och css
  • För- och nackdelar

• <template>

  • Låter oss definiera html-strukturen i ett custom element på ett smidigt sätt

• <slot>

  • Låter oss välja vart child-element hamnar i html strukturen

Demo: building dynamic UIs

...using custom elements

1. Create mockup

• A static version of the application

2. Update details on menu clicks

• Make the application dynamic by connecting the different parts

3. Make menu dynamic

• Introduce dynamic content by fetching data from a backend

4. Change menu to custom element

• Encapsulate the DOM structure

5. Move menu creation into menu

• Take control of DOM manipulation

6. Use attribute for menu data url

• Allow a declarative way to provide the url

7. Move click handler into menu

• Eliminate the need to know anything about the internal DOM structure outside of the menu

8. Change details to custom element

• Encapsulate the DOM structure
• Isolate the update logic

Sammanfattning