Re: Styling form control elements

On Dec 5, 2013, at 8:49 AM, Ian Hickson <ian@hixie.ch> wrote:

> On Thu, 5 Dec 2013, Ryosuke Niwa wrote:
>> 
>> Let me understand the problem of styling/replacing builtin form controls.
>> 
>> As I understand it, people want to do:
>> 
>> <select name=cities is=map>
>> <option>Oakland</option>
>> <option>San Francisco</option>
>> <option>San Jose</option>
>> ...
>> </select>
>> or
>> <input is=switch type=checkbox ...>
>> 
>> to have a nice fallback when "is" / shadow DOM is not supported.
>> 
>> Why can't we just do:
>> <map>
>> <select name=cities>
>> <option>Oakland</option>
>> <option>San Francisco</option>
>> <option>San Jose</option>
>> ...
>> </select>
>> </map>
>> and
>> <switch><input type=checkbox ...></switch>
>> 
>> instead?
> 
> I suppose you _could_ do that, but it would mean that author-defined 
> widgets would be second class citizens.

Could you elaborate on what you mean by this?


> Personally what I'd like is:
> 
> <select name=cities>
>  <option>Oakland</option>
>  <option>San Francisco</option>
>  <option>San Jose</option>
>  ...
> </select>
> 
> ...with:
> 
> select[name=cities] { binding: url(map); }
> 
> ...in the CSS, since this is just presentation.

This approach is better than using custom element in that author can't expose a new JS API or override existing ones so that UA can safely NOT apply the binding if wanted.

On the other hand, this still doesn't tell UA whether it should be ignoring the binding on a given platform or not (i.e. it doesn't address the device-specific UI control use case).

>> What is so special about form controls or custom elements that warrant a 
>> completely different mechanism?
> 
> Different than what? I'd love the markup to not be different whether or 
> not we're using custom widget presentations.

This is an added benefit of using "binding" CSS property.

On the other hand, using CSS for binding shadow DOM has a culprit that instantiation & life-cycle of such shadow DOM becomes a tricky issue.   i.e. spec'ing exactly when those shadow DOM bind & unbind would be tricky.

- R. Niwa

Received on Thursday, 5 December 2013 17:09:43 UTC