.output class doesn't apply anymore

[Elchi3]

It seems like using .output in the CSS tab doesn't work anymore now that we're using Shadow DOM.

I see no hamster here, for example:
http://127.0.0.1:9090/pages/tabbed/select.html
CSS: https://github.com/mdn/interactive-examples/blob/master/live-examples/html-examples/forms/css/select.css

[wbamberg]

These are all the existing examples that use .output:

optgroup
option
legend
fieldset
select
datalist
input-file
input-email
input-radio
input-month
input-checkbox
input-image
input-datetime-local
input-date
input-color
picture
iframe

I think there are a couple of options, and I'd welcome opinions!

(1) have <div class="output"> wrapping the shadow DOM contents.
(2) make examples include the container element explicitly in the HTML pane.

The advantages of (1) are that existing examples don't need to change, and (more importantly IMO) we keep the HTML pane contents more narrowly focused on the example being demonstrated

The advantage of (2) is that there is less magic: it's clear what .output in the CSS pane refers to.

I think I'd vote for (1), to keep the HTML pane contents minimal. I think .output is pretty obvious.

[schalkneethling]

Acceptance Criteria

Examples that uses .output class for styling works again.