886293 - Make x-switch easier to style

Status: RESOLVED WONTFIX

(Developer Ecosystem :: Web Components, defect)

Description

[Soledad Penades [:sole] [:spenades]]

I was trying to override the default styles, and the first thing I needed to do is to make the switch bigger so that the "tappable" area is more "touch friendly". Consequently I tried changing the height and width of the x-switch element, which apparently works great, except it doesn't, because there's some other element which is the one that actually reacts to taps/clicks, and that one didn't inherit my custom set dimensions. So even if the entire element "looks" clickable, only the top of it actually is.

Here's a demo/test:
http://people.mozilla.org/~spenades/test_cases/20130624_switch_styling/

There is surely a reason for the code being as it is, but the markup for the component doesn't facilitate customising it either: three divs classed as 'x-switch-knob', three almost identically looking divs classes 'x-switch-text' with duplicated attributes, etc. This makes changing the appearance more complicated than it should be, as you change something and it ends up affecting something else.

What I would naively be expecting is something like this (very pseudo):

x-switch
|
+-- texts div
| |
| +-- div with on text
| |
| +-- div with off text
|
+-- div with knob

the idea being that each element can be unequivocally addressed with "semantic" meaning instead of hierarchical queries, à la "x-switch > div > .x-switch-knob:last-child .x-switch-text:last-child:after"

Comment 1

[Fred Wenzel [:wenzel]]

x-tag is an independent community project now and tracked in their bug tracker.