1 of 8

Styling Custom Elements

2 of 8

3 Use Cases (web developer perspective)

  1. I want to theme my page (e.g. buttons are red text on blue background)

​

  • I want this complex widget’s subwidget(s) to look like this

​

  • I want to theme this region of my page

3 of 8

Library author perspective

  • UI libraries (e.g. material design) want to expose theming hooks

​

  • Widget libraries (e.g. polymer, x-tags) want to expose sub-component styling points

4 of 8

::part()

  • Great for use case 2, widget author perspective.
  • Requires explicit opt-in at every traversed level
  • Bad for theming and global styling of heavily composed pages

my-application::menu-bar::file-menu::new-doc::dialog::ok-button { � background-color: green;�}

​

5 of 8

Custom Properties

  • Great for use cases 1 and 3, UI author perspective
  • Bad for precise styling

e.g. it’s not possible to change the background color of just *one* of the buttons in a dialog using custom properties

6 of 8

We should do both

And indeed, we probably are. Go us!

7 of 8

@apply

  • Custom properties are very limited

​

  • @apply tries to fix this, but comes at a cost
    • Performance optimization is hard
    • @apply syntax is a bit ugly

​

8 of 8

Should we do @apply?

  • Do we need it?

​

  • Are there other options?

​

​