Skip to main content

Bold Penguin SDK Custom Elements

Overview​

The Bold Penguin SDK uses the Custom Element specification to handle contracts and communication between Bold Penguin elements and your own.

The documentation for each web component includes a list of custom element hooks. Some of these hooks will have the description disables html. When you register one of these custom elements in the Custom Element Registry, we will disable the SDK HTML and JavaScript at and below this component and instead forward the properties to your component. You are responsible for implementing any events or content at or below the replaced component to interface with the rest of the SDK.

If you are developing in Typescript, you can use Contracts to write better tests and track changes we make to our components.

Creating your own custom elements​

  1. Review our documentation for the custom element you want to replace
  2. In the framework or tooling of your choice, create a custom element with the documented properties, attributes, and events to match the contract
  3. Handle connectedCallback and disconnectedCallback to reset and cleanup your custom elements when the component is reused
  4. Register your element with the custom element registry to notify the Bold Penguin SDK of the availability of your element

Common Issues​

I'm seeing null or undefined error messages​

Most commonly this is caused by the DOM creating temporary instances of the nodes. In order to handle the component being rendered outside the SDK tree you may need to refactor your component to handle null or undefined property values. If the problem is upstream of the component you created, please contact us directly and we'll work on resolving the issue.

I'm seeing data corruption​

The DOM treats your elements like any other tag. This means the DOM may move your element around and reuse it. In order to handle this you may need to expand how you are using connectedCallback to reset to initial state or disconnectedCallback to prevent leaks.

I'm having issues with my date picker​

The Bold Penguin SDK prefers to receives dates as ISOString. Not using ISOString can occasionally cause issues. This is relevant if you are using the bp-sdk-date-input.