Feature: Support for speaker notes

[mirisuzanne]

We added this in https://github.com/oddbird/sliiides. In terms of markup, maybe notes can be added within the slide elements, so that the direct-child markup is maintained for numbering slides?

<slide-deck>
  <div><!-- this still becomes a numbered slide -->
    <div slide-content>The visual border is moved here for grid mode</div>
    <div slide-notes>Notes are hidden in list view</div>
  </div>
</slide-deck>

We might be able to automate some amount of that…

[mirisuzanne]

notes should be allowed in both list and grid views, I think. Is it also useful to have a notes-only option, or do notes always accompany slides?

[mirisuzanne]

Over on oddbird/sliiides, the structure of a slide looks like this:

slide
  - slide canvas
  - slide notes

That two-part structure has worked pretty well, and seems pretty consistent across other presenting apps.

Currently, this component treats all slide-deck children as a slide canvas. But showing/hiding notes is an important part of presenting and selecting views, so I think we need to provide a bit more structure here. (While a slide canvas itself might contain more structure, that seems like a theme concern, and doesn't require any additional behavior from the presentation tool.)

I see two reasonable approaches (which could be done in parallel):

1. A slide-group (name TBD) component with some shadow-dom and slots for canvas and notes. This provides some built-in structure, but less flexibility.
2. A set of attributes (eg slide-canvas, and slide-notes) that authors can apply to their own markup, to get the expected behaviors. I don't think a slide-group attribute would be necessary in this case, since we can still treat every child of slide-deck as a group.

I don't think option 1 adds much over option 2, so I will likely start with the latter. If we want a slide component in the future, it should be simple enough to add on top of the attribute solution.

[mirisuzanne]

Discussion this morning:

• wrapper: TBD… slide-container? slide-group? slide-item?
• internals: slide-note and slide-canvas
• remove shadow dom styles, and provide a light dom css file