patternfly-elements icon indicating copy to clipboard operation
patternfly-elements copied to clipboard

feat: ssr-friendly slot-controller

Open bennypowers opened this issue 1 year ago • 2 comments

:point_right: DRAFT PR DO NOT MERGE :point_left: This approach is experimental and requires discussion before pursuing. This PR is a PoC only. However there is a lot to get excited about. for example, we could load a /elements/pf-icon/pf-icon-ssr.js at ssr time which, instead of setting up a bunch of client side js to fetch and render the icon, would just dump the contents of the svg into shadow root with await readFile, at SSR time.

Read more: https://lit.dev/docs/ssr/overview/

TODO:

use export conditions instead of isServer

image image

What I did

  1. implement lit-ssr in slot-controller via a new has-slotted host attr

Testing Instructions

  1. disable javascript and visit PR Preview Card SSR demo (webkit or chromium until firefox implements)

Notes to Reviewers

Problem: Lit-SSR can't access the children, whereas SlotController relies on knowledge about the children. Proposal: read has-slotted="a,b,c" attr on SlotController hosts. This has limitations:

  1. content author has to add attrs
  2. we can't use hasSlotted in connectedCallback, only in render (lit may relax this limitation in the future)

bennypowers avatar May 25 '23 08:05 bennypowers