This slideset reports on the <i-slide> Web component, developed by François and Dom during Geek Week 2021 to inline individual HTML/PDF slides of a slide set in an HTML page.

To start the slide show, turn on JavaScript and press Shift+F5 or click on a slide. Return to the index by pressing the Esc key.

`<i-slide>`

A Web component to inline individual HTML/PDF slides in an HTML page.

François Daoust
Dominique Hazaël-Massieux

Geek Week 2021

Motivations

Extract from a talk page of the workshop on Web and Machine Learning that features interleaved slides and transcript

Ease creation of talk pages for:
- Workshops
- TPAC, AC
- Group presentations
Explore Web components

Slides interleaved with text

Performance/Memory—`O(n * n)`

Goal is to include each slide in a slide set...
Basic embed loads/parses/runs the entire slide set for each slide

HTML slides: hard to encapsule

Difficult to embed HTML slides directly without side effects

PDF slides: no default viewer

Need to inject PDF.js and a bit of code

<i-slide> in a talk page

<!DOCTYPE html>
<html>
  <body>
    <h1>A talk page</h1>
    <p>This is slide 1:</p>
    <p><i-slide src="myslides.html#1"></i-slide></p>
    <p>Followed by slide 2:</p>
    <p><i-slide src="myslides.html#2"></i-slide></p>
    <script
      src="https://w3c.github.io/i-slide/i-slide.js"
      type="module"></script>
  </body>
</html>

The <i-slide> component

Provides a common abstraction to embed a slide
Loads/Parses slide sets only once
Does not run the JS code in the slide set
Provides the HTML/CSS encapsulation for HTML slides
Takes care of loading and piloting PDF.js for PDF slides
Handles element resizing logic, preserving slides' aspect ratio

Not implemented yet

Support for [your favorite?] framework for HTML slide sets
(only tested with Shower.js, Reveal.js, and b6+)
Support for incremental logic in slides
Workarounds for browser bugs
(No @font-face in components in Chrome/Firefox!)
Support for references to slide IDs instead of slide numbers
Support for CSS properties object-fit, object-position

Part 2:
Web components

Exploration notes

Practical guidelines?

How to design a browser-grade web component?
- Attribute <-> Properties reflection
- ARIA role and aria-busy
- API contract?
- What else?
What are CSS properties and events that web components need to track?

Open questions?

How to listen to CSS property changes?
To inline or to block?
Any way to create a replaced element?
What are good default values for CSS properties and HTML attributes today?
(e.g. is a 2px border still useful?)
What is the story about is=""?

Standardization questions

What is the governance story for Web components?
- Link to the Web component repo in WICG?
- Link to the Open UI CG?
- Link to the Web Components CG?
What about JS encapsulation? To be addressed by ShadowRealm?
Should W3C develop best practices for Web components?

Breakout session at TPAC:
Community driven spec/API prioritization
Proposed by the Web Components CG

Part 3:
One more thing

Integration in RRSAgent

Slideset: [url]
[Slide 1]
Dom: blah...
[Slide 2]
Francois: Blah?
[Slide 3]
Dom: Blah!

RRSAgent, draft minutes v-slide

See demo minutes generated from a similar IRC log

The end

Source code:
https://github.com/w3c/i-slide

For asides, I wrap my slides in i-slide with pride!

—Dom, Tips & Tricks for Bling-Bling Talks

<i-slide>