Skip to main content

$names

The $names special helper allows a component to access registered child elements that have been assigned a specific name using the d-name directive. This is useful for managing named slots or dynamically manipulating specific child elements within a component.

Syntax​

<ErrorMessage>
  <p d-name="example">Hello</p>
</ErrorMessage>

Inside ErrorMessage:

console.log($names['example']); // [<p>Hello</p>]

Example​

<component>
  <p d-name="header">This header is injected into the component.</p>
  <p d-name="footer">This footer is injected into the component.</p>
</component>
const Component = DOMY.createComponent({
  html: `
    <div>
        <template d-insert="$names['header']"></template>
        <div>Main content</div>
        <template d-insert="$names['footer']"></template>
    </div>
  `
});