wiki:XBL2UseCases

Version 8 (modified by Dimitri Glazkov, 13 years ago) (diff)

--

Component Model (aka XBL2) Use Cases

WORK IN PROGRESS

A canonical set of uses cases that represents the set of problems we are trying to solve by implementing a component model. For implementation details, see XBL2 Spec.

Built-in HTML Elements and Their Behaviors

Does:

  • provide a uniform way to browsers to implement complex HTML elements, such as video/audio, sliders, progress elements, etc. possibly using scripting.
  • provide light-weight implementations of specialized markup languages

Needs:

  • shadow DOM
  • UA-level attachment
  • ability to designate and use DOM SPIs only within the shadow scope
  • ability to completely hide implementation details from author and user
  • restricted post-UA-level styling using pseudoclasses
  • style/event propagation control at the borders of the shadow DOM
  • high performance, especially compared to native implementation

Could use:

  • declarative templating/binding

Doesn't care:

  • mutable templates
  • dynamic attachment/detachment
  • template inheritance
  • attachment using CSS or DOM
  • content element (output ports), since they can't have children (this may change)
  • attribute/pseudo forwarding
  • xml:base handling

Interesting scenarios:

  • If an input range element is implemented using this functionality, what happens to its shadow DOM if author attempts to add shadow DOM to that element?
  • Implement a video/audio element. How can the binding reach into a private supporting API that is not available to the author?

Custom Widget System

Does:

  • provide a uniform way (i.e. DOM) to declare widget APIs
  • encapsulate widget implementation details
  • enable control over how styles and events outside of a widget affect it
  • enable widget styling primitives
  • asynchronously instantiate and initialize widgets (for instance, display a widget without starting up a script context, then progressively enhance with script).
  • allow seamless reuse a widget written using various libraries or frameworks
  • allow using widgets declaratively, with minimal knowledge of the underlying implementation
  • provide a way to create new widgets by extending existing widgets

Needs:

  • shadow DOM
  • content element (output ports)
  • style/event propagation control at the borders of the shadow DOM
  • attachment using CSS and DOM
  • separate instantiation and binding phases (or another way to allow asynchronous binding)
  • attribute/pseudo forwarding
  • declarative templating/binding

Could use:

  • dynamic attachment/detachment
  • template inheritance

Doesn't care:

  • mutable templates
  • xml:base handling

Interesting scenarios:

  • Implement a "polaroid frame" widget? This widget, when bound to any element would display its contents in a Polaroid(tm)-like frame.
  • Suppose the widget system has a centralized "settings" widget, with which all other widgets should communicate to add their settings. Implement this communication, provided that all widgets are opaque elements.
  • Implement a "tab set" widget. As you add "tabs" to it, tab titles appear in a row at the top, and tab contents appear in the main area, only visible when the corresponding tab title is selected.
  • Output ports need to be insertion points, not cointainers. If the output port is a container (that is, an existing element in the shadow subtree is designated as a place to add the "light" nodes), some layout scenarios aren't possible. For example, for subtree, you can not use flexbox to layout all of the paragraphs in the story:
    <template>
        <p>Once upon a time,
        <content includes="p">
        <p>And they lived happily ever after
    </template>
    

Layout Manager

Does:

  • provide a framework for client-side restructuring of content to accommodate layout
  • support both imperative a declarative layout models
  • provide templating/theming capabilities

Needs:

  • shadow DOM
  • content element (output ports)
  • attachment using CSS and DOM
  • separate instantiation and binding phases (or another way to allow asynchronous binding)

Could use:

Doesn't care:

  • mutable templates
  • xml:base handling