Skip to content

Instantly share code, notes, and snippets.

Avatar

Caroline Liu caroqliu

  • New York, NY
View GitHub Profile
View bento-display-contents.md

display: contents in Bento AMP

How do we use it?

PreactBaseElement creates a <c style="display: contents"> element in the shadow root appended to its associated custom element. Note: display: contents is not supported everywhere, and its accessibility is not up to spec. Given display: inline is an acceptable fallback for it, <c> is utilized because it is display: inline by default.

For a passthrough element, it looks like this:

amp-foo
  ├── #shadow-root 
  |    └── c > Foo({children: Slot})