I’m trying to get webcomponents working with Gutenberg. I’ve got a webcomponent that has two slots. Those two slots allow for any content to be present:

<fancy-layout size="large" stretch="right">
  <div slot="left">Content goes here</div>
  <div slot="right">Secondary content goes here</div>
</fancy-layout>

I've been trying to build a custom block that allows me to fill those two slots, but it seems it's impossible to do so. I've tried to use <InnerBlocks /> template system, but it seems it will always add wrapper divs, which makes it impossible to actually achieve this structure.

There has been some discussion to actually solve this at the webcomponent level, but because of good reasons it hasn't been implemented WICG/webcomponents#574

I think it should be possible to define multiple areas where we can actually have a blocklist available.

<fancy-layout size="large" stretch="right">
  <div slot="left"><InnerBlocks onContent={(content) => setAttributes({left: content})}/></div>
  <div slot="right"><InnerBlocks onContent={(content) => setAttributes({right: content})}/></div>
</fancy-layout>

Disclaimer: I'm not familiair enough with the internal of Gutenberg yet, so I might be missing something how to actually achieve this with the current setup..