Nova · Composition

Slot fill

A fragment is chrome with a hole in it, { slot: "body" }. An action opened with the fragment has its own layout put into the hole. The action does not mention the frame: whoever opens it decides, so the same action stands framed on one canvas and bare on the other.

The shell, as it is written

{
  canvases: [
    {
      id: 'slot-fill.framed',
      initial: { action: 'slot-fill.show', with: ['slot-fill.frame'] },
    },
    { id: 'slot-fill.bare', initial: 'slot-fill.show' },
  ],
  actions: {
    slot-fill.show: {
      id: 'slot-fill.show',
      data: { title: 'The Tempest' },
      layout: { component: 'Text', children: '$.title' },
    },
  },
  fragments: {
    slot-fill.frame: {
      kind: 'fragment',
      id: 'slot-fill.frame',
      layout: {
        component: 'Stack',
        children: [
          { component: 'Text', children: 'Tonight' },
          { slot: 'body' },
          { component: 'Text', children: 'Doors at 19:00' },
        ],
      },
    },
  },
}

Running herepress it

Tonight

The Tempest

Doors at 19:00

The Tempest

What is done to it

Nothing. It is only drawn.

What then stands on each canvas

{
  slot-fill.framed: ['slot-fill.show'],
  slot-fill.bare: ['slot-fill.show'],
}

What it then says

Tonight
The Tempest
Doors at 19:00
The Tempest

Output matches the expected value

Left: the action as the package ships it. Right: the same action running in this page, rendered with this site’s components. Below: the action run as the example specifies, on the installed package.