Re: [webcomponents] Standard Use Case (Was Auto-creating shadow DOM for custom elements)

Let's take a look at the original list of use cases proposed in 2008 at http://www.w3.org/2008/webapps/wiki/Component_Model_Use_Cases:

Layout Manager
Layout Manager Use Case Parameters
Who
Web Framework Engineer
What
Build a layout library, consisting of a UI layout primitives, such as panel, resizeable panel, tab group, stack, accordion containers, etc.
Purpose
Allow web application developers to easily build constrained layout and populate it with arbitrary HTML content. Provide a way for developers to build their own layout primitives by extending the provided ones.
Examples
Dijit Layout
GWT Panels
Sencha Panels
SproutCore Views
Desirable Properties
Composability -- a method to compose layouts with both UI primitives and DOM elements.
Extensibility -- a way to build on layout primitives to create new ones.
Encapsulation -- styles, defined to hold layout in place should not be in danger of being stomped on by the author stylesheets.
Performance -- layouts built with layout manager should appear quickly, avoiding re-flows and FOUC-like symptoms.
Widget Mix-and-Match

This use case appears to be satisfied by the existing specifications but only if we use custom elements and shadow DOM together.

Mix-and-matching Use Case Parameters
Who
Web Application Engineer
What
Build an application using multiple existing controls from several frameworks.
Purpose	
Write application faster by reusing code.
Avoid having to exclusively go with one framework.
Examples
How do you access Dijit elements in JQuery
Using SproutCore 2.0 with jQuery UI
Which JavaScript framework (jQuery vs Dojo vs … )?
Desirable Properties
Consistency -- a compatible way to expose properties and methods across widget frameworks.
Composability -- a method to compose with cross-framework widgets.
Rendering Form Controls with SVG

This use case is not satisfied by existing specifications because consistency and composability requirements are not met.

SVG Form Controls Use Case Parameters
Who
Web Application Engineer or Web Framework Engineer
What
Create a set of UI controls that act like standard HTML forms controls, but use SVG for rendering.
Purpose	
Provide custom appearance of form controls, consistent with overall the Web application theme.
Make the form controls scale beautifully for various resolutions and form factors.
Examples	
SproutCore's ImageButtonView, Sencha's Number -- examples of extensive themed form control hierarchy.
Desirable Properties
Consistency -- the controls should act just like any other DOM elements.
Encapsulation -- the document shouldn't be able to accidentally mess up the rendering of the controls.
Performance -- load quickly, avoid FOUC-like symptoms when using controls.

This use case is probably satisfied by using shadow DOM.

Contacts Widge
Contacts Widget Use Case Parameters
Who
Web Application Engineer
What
Build a drop-in Contacts widget, which has a pre-defined appearance and shows a list of your contacts, with a way to change the widget to compact or full view and to tell the widget to refresh its state.
Purpose	
Use the widget anywhere in the application without having to worry about styles affecting its appearance.
Hide details of loading contact data and other plumbing of the widget from the consuming code with a stable API.
Examples
A screenshot of Google+ "in your circles" widget
Desirable Properties
Encapsulation -- means to ensure style of the document does not affect the widget, and widget's logic is kept to the widget.
Composability -- easily added anywhere in the DOM tree.

Again, this use case is satisfied only if we used both custom elements and shadow DOM together.

Like/+1 Button
Like/+1 Button Use Case Parameters
Who
Web Application Engineer
What
Build a drop-in widget with a pre-defined appearance of a button, showing a count of likes/+1s for this instance of a button (count is stored at a central location), embeddable on any document on the Web.
Purpose	
Provide a simple vehicle for Web authors to embed the button.
Isolate widget implementation details from the document.
Examples	
Facebook Like button embedding instructions
Google +1 button embedding instructions
Desirable Properties
Encapsulation -- means to ensure style of the document does not affect the widget, and widget's logic is kept to the widget.
Confinement -- a way to completely isolate the widget implementation from the document in which it is being embedded.
Performance -- don't block the page load.

This use case is not satisfied due to confinement requirement.

Table-based Charts
Table-based Charts Use Case Parameters
Who
Web Framework Engineer
What
Provide a way to represent table data markup as charts or diagrams.
Purpose	 Make it easy for Web authors to create charts and diagrams using table markup.
Examples
Christian Heilmann's tochart script
Desirable Properties
Composability -- one should be able to make chart by creating a table, imperatively or declaratively.
Performance -- no FOUC or blocking load when charts are loaded.

This use case is half-satisified since decorator hasn't been spec'ed yet.  You can combine custom elements and shadow DOM but that's hardly easy.

Timezone selection via Image
Timezone selection via Image Use Case Parameters
Who
Web Framework Engineer
What
Graphical representation of a timezone selector that shows a world map in addition to/instead of a drop-down list.
Purpose
Make it easy for Web authors to spruce up time zone selection (or similar).
Examples
Time Zone Map
Desirable Properties
Extensibility -- Basically extending <select>. Should fall back to a simple <select> where components are not supported.
Consistency -- Extend the <select> API for item selection.

Again, this use case is half satisfied in that is=~ attribute hasn't been spec'ed although you can imperatively attach shadow DOM.

Entry-helper
Entry-helper Use Case Parameters
Who
Web Framework Engineer, Web Application Engineer
What
Add an entry-helper (drop-down) list to input fields.
Purpose
Help the user fill in a form field, show suggestions and acceptable values, speed up data entry.
Examples
Most browser's address bar or web search field
Desirable Properties
Extensibility -- Basically extending <input>. Should fall back to a simple <input> where components are not supported.

Ditto.

I don't think "Built-in HTML Elements Use Case Parameters" is a valid use case as it has been discussed numerous times.

So again, I don't see any use case listed there that could be met by simply introducing document.register.

- R. Niwa