Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
33 lines (25 sloc) 1.36 KB

Dependencies

Update function provides a helper method for resolving dependencies dynamically in templates, which use other custom elements. It uses define function from the library, so its API is similar to described in the Definition section. However, to properly work with templates it returns template update function, rather than a constructor or a map of constructors.

Resolving dependencies avoids defining not required elements and allows creating a tree-like dependency structure. A complex structure may require only one explicit definition at the root level. As the library factories decouple tag name from the definition, elements can have custom names.

html`...`.define(map: Object): Function
  • arguments:
    • map - object with hybrids definitions or custom element's constructors
  • returns:
    • update function compatible with content expression
import UiHeader from './UiHeader';

const UiCard = {
  withHeader: false,

  render: ({ withHeader }) => html`
    <div>
      ${withHeader && html`
        <ui-header>...</ui-header>
      `.define({ UiHeader })}
      ...
    </div>
  `,
};

In the above example, the customer of the UiCard element does not have to define UiHeader explicitly. It is defined inside of the rendering process, and only if withHeader resolves to true.

You can’t perform that action at this time.