Re: [shadow-styling] Named parts, styling built-in form controls, and shadow styling (was Re: Goals for Shadow DOM review)

On Fri, Feb 21, 2014 at 11:19 AM, Edward O'Connor <eoconnor@apple.com> wrote:
> Hi Domenic,
>
> You wrote:
>
>> However, what I was initially wondering was: can we just use existing
>> shadow DOM constructs? E.g. could you style the slider with
>>   input[type="range"] /shadow/ .slider-thumb
>> ?
>
> I think we want to end up in a world where existing engine features *can
> be explained* by platform features, but *are not necessarily implemented
> with* platform features. Using /shadow/ to expose pieces of native form
> controls feels like we're promising too much to authors, e.g. what if
> the slider thumb isn't an Element?
>
> In a world with Named Parts and a Shadow DOM capable of defining them,
> input[type=range]::part(slider-thumb) levels the playing field between
> authors and implementors without overcontsraining implementations.
>

With style sets scrollbar styling can be styled simply as:

@set my-vertical-scrollbar  {
   .slider-thumb {  background: yellow;  }
   .slider-thumb:hover {  background: red;  }
   .slider-thumb:active {  background: blue;  }
}

div {
  overflow: auto;
  vertical-scrollbar: my-vertical-scrollbar;  /* the property accepts
style set name */
}

And as I said before style sets are quite universal - can be used for styling
shadow DOMs and intrinsic elements parts.

-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Friday, 21 February 2014 19:52:44 UTC