Registered Web Components as Custom Components and using Slots

Technical Questions CMS
1

The idea is to register a library of native web components to be used in any framework.

Example component usage, text is slotted in an unnamed html slot:

<my-button>Button Text</my-button>

Builder.io registration:

window.builderWcLoadCallbacks = [
  (context) => {
    context.Builder.registerComponent(null, {
      name: 'MyButton', // A user-friendly name for the Visual Editor
      tag: 'my-button', // The HTML tag name of your web component
      canHaveChildren: true,
      defaultChildren: [
        {
          '@type': '@builder.io/sdk:Text',
          text: 'Button Text',
        },
      ],
    });
  },
];

I’ve tried several variations of this, but am unable to get the “Button Text” to appear in the default/unnamed slot using the visual editor.

Also side note: the docs say to use null for the first parameter, but that throws an error.

2

Hello @bpkyn,

Could you provide a bit more context on the issue? Are you using Builder web components to integrate Builder? It would also be helpful if you could share the documentation you’re following. Additionally, do you have a minimal reproducible example that we can use to troubleshoot and reproduce the issue on our end?

Thanks,

3

Yes using the web components API and child blocks docs:

<builder-component
  model="page"
  api-key=""
></builder-component>
<script async src="https://cdn.builder.io/js/webcomponents"></script>

<script>
import { Button } from '@kyndryl-design-system/shidoka-applications/components/reusable/button';

window.builderWcLoadCallbacks = [
  (context) => {
    context.Builder.registerComponent(Button, {
      name: 'KynButton', // A user-friendly name for the Visual Editor
      tag: 'kyn-button', // The HTML tag name of your web component
      canHaveChildren: true,
      defaultChildren: [
        {
          '@type': '@builder.io/sdk:Text',
          text: 'Button',
          },
      ]
    });
  },
];
</script>

The Button web component from our design system library renders correctly, but I am unable add add children (text) into the default/unnamed slot with the visual editor.

4

Hello @bpkyn,

It sounds like you’re making great strides with integrating your kyn-button web component into Builder.io using the Web Components API, but I understand the frustration when it comes to not being able to add text to the default slot via the Visual Editor.

Here are a few pointers that might help guide you forward:

  1. Verify Slot Implementation: First, double-check that your kyn-button component includes a <slot> tag within its template. This is crucial because it dictates where the children content, like text, will be slotted. Without it, the Visual Editor won’t be able to add children effectively.

Copy code

<template>
  <button>
    <slot></slot> <!-- Essential for rendering children -->
  </button>
</template>
  1. Registration Details: You’ve correctly set canHaveChildren: true in your component registration, which is great. This should enable the component to accept children in Builder’s Visual Editor. Also, ensure your defaultChildren object is formatted correctly and matches the expected schema.
  2. Component Lifecycle: Make sure the component and registration logic is executing in the right order. The component needs to be fully defined before registering it with Builder, so it might be worth checking the sequence in your script.
  3. Inspect and Debug: Utilize Builder.io’s Inspector tool during editing to see if there are any discrepancies in how the children are supposed to be displayed or if there are any console logs that could clarify what’s happening.

Please try these steps out and let us know how it goes! We’re here to help you get it working seamlessly.

Thanks,

5

Pretty sure items 1-3 are implemented correctly, and no notable errors are given by the inspector.