Configuration and slots

componentConfig supplies application-owned settings and default attributes. slots supplies class names for the parts a component exposes. Both require host or Shadow DOM mode.

Try configuration and slots

Change the callout’s label or title emphasis, then increment the counter. The label comes from componentConfig; emphasis changes the title’s named slot class. These prop updates preserve document state.

Default attributes and configuration

componentConfig[tag] supplies fallback attributes. Explicit DIL attributes take precedence in the component’s evaluated attributes object. For example, this makes stock buttons outlined unless a document button specifies another variant:

<DilRenderer
  mode="host"
  text={source}
  componentConfig={{ button: { variant: "outline" } }}
/>

Registered components also receive the original application configuration as props.config. That object remains separate from the effective attributes. A component can read attributes.label to allow document overrides, or read config.label when the application should own the value.

The live Callout intentionally reads config.label and accepts it only when it is a string. The component must implement the fields it accepts: making a value available does not automatically apply it to its markup. The custom Action adapter, for example, honors disabled but does not implement every attribute supported by the stock button.

Named slots

Use the components registry from the custom component guide:

<DilRenderer
  mode="host"
  text="<Callout>Ready to deploy.</Callout>"
  showStatus={false}
  components={components}
  className="od-docs-output"
  componentConfig={{ Callout: { label: "Deployment" } }}
  classNames={{ Callout: "od-custom-callout" }}
  slots={{
    Callout: {
      title: "od-custom-title od-custom-title-strong",
      body: "od-custom-body",
    },
  }}
/>

A compound component receives its named classes through slots. It must forward slots.title, slots.body, or its other documented slots itself. className styles the visual root; named slots style its parts. These slot values are CSS class strings, not React elements or replacement child content.

The classes above are defined in the live example stylesheet. In host mode, include that CSS in your application stylesheet. In Shadow DOM mode, supply it through shadowStyles.

Scope and limits

Configuration and slots apply to one renderer instance. They do not change another message or the website shell. Updating them can change presentation without replacing the DIL source; changing the renderer’s React key or rendering mode restarts the document.

Slots are a contract owned by the registered component. They cannot select arbitrary internal elements in stock charts, graphs, or other adapters. Replace an adapter when its public classes and configuration do not provide the control you need.

The custom component example shows that forwarding together with the reveal ref and callback API.