Best Practices

Using Fudgel to create custom elements is straightforward. To help ensure maximum compatibility and performance, here are some best practices to follow when writing your components.

Performance

For performance, do not reassign to a bound property. Modify a local variable and only assign it back to the bound property when all changes are complete. This prevents multiple updates to the DOM.

Compatibility

When building a library, do not automatically register your custom elements in your exported module. This won't allow developers to resolve name conflicts. Instead, export a function that allows a prefix or a custom name to be provided, similar to how defineRouterElement() (see Routing) and defineSlotComponent() (described in Content Projection) work for Fudgel's built-in elements.

Data Flow

In general, you want your element to accept data into the controller using attributes (strings) and properties (any data). Attributes have universal support, where as most support properties.

When you need to send data out of your controller, send an event. If you need data to be visible and retrievable from the outside, expose it through a property.

Alternately, you can use a service to share data between components. This example uses the built-in Emitter class, as found on the utilities page.