Re: [whatwg] Styling

[Cameron McCormack]

I'm wondering if anybody has had any further thoughts on how <summary> 
and <details> should be made stylable.

My initial feelings were along the lines of Tab's -- the disclosure 
widget feels very much like something that is created like a list bullet 
and matched with ::marker.  But reading Ian's reply I'm beginning to 
think that this is inadequate, as some platforms may not use a small 
separate widget for expanding/collapsing the details at all, and thus at 
some point in the future a binding should be used to define the 
element's native behaviour, and authors could switch that off with 
binding:none to get a stylable element.

But I also feel that authors should be able to get a useful, stylable 
presentation of the element without having to construct it themselves, 
e.g. by using the UA styles that Lachy suggested.  Would it be feasible 
to have a native presentation of the element, which you could opt out of 
with binding:none, and to have something like Lachy's styles apply when 
the native binding isn't being used?

When the native appearance is being used, should it be possible to 
target the disclosure widget with ::marker, or to be able to use 
list-style-type to change from the default disclosure widget, if the 
natural presentation of a details/summary for the platform is like a 
list bullet?  If that is not the way the platform would present a 
details/summary, should attempting to style the bullet automatically 
turn off the native rendering?

One thing that I don't like about thinking of the disclosure widget as a 
list bullet is that it requires the element to have display:list-item. 
I am not sure how useful it would be to have a <summary> element be 
inline or inline-block for example, but I feel like it would be good to 
support the creation of the ::marker in a manner independent of the 
display type.

But I am drawn to the idea of using list-style-type to specify the plain 
CSS disclosure widget appearance.  It seems natural to me for authors to 
use list-style-image to supply a custom image.