Introduction to Slots

Slots allow you to insert custom content into components. They provide great flexibility by allowing you to control the appearance and content of most components. Slots are commonly used in component libraries to allow advanced customization without modifying the core structure of a component.

Vision

Our goal is to provide a flexible and open library, compatible with multiple technologies, and offering extensive customization to meet specific user needs. Key principles include:

• Openness to multiple frameworks (React, Angular, Vue.js, Blazor, NativeJS).
• Flexibility in component usage and customization.
• Ease of integration without requiring extra configurations.

Basic Usage of Slots

To use a slot, simply insert your content between the component's tags. For example:

                                                        
                                                        
                                                            <nv-fieldtext>
                                                          <!-- Your content here -->
                                                        </nv-fieldtext>
                                                        
                                                            

Slot Attributes

The <slot> element supports the following attributes:

• name: Specifies a slot name, allowing multiple slots within a component.

Named Slots

Named slots let you place specific content in precise locations. This is useful when structuring a component that requires multiple customizable sections.
Example:

                                                        
                                                        
                                                            <nv-fieldtext label="Leading Input">
                                                          <nv-badge slot="leading-input" label="test" dismissible= class="ml-1">
                                                          </nv-badge>
                                                        </nv-fieldtext>
                                                        
                                                            

Fieldtext - Slot

Incorrect Slot Usage

A bad example would be inserting content directly into the component without using slots, which reduces flexibility and reusability:

                                                        
                                                        
                                                            <nv-fieldtext>
                                                          <div class="icon">🔍</div>
                                                          <input type="text" />
                                                          <div class="icon">❌</div>
                                                        </nv-fieldtext>
                                                        
                                                            

Best Practices

• Always use slots to keep components modular and maintainable.
• Use named slots for better content organization and flexibility.
• Provide default slot content when necessary to ensure usability.
• Avoid styling limitations by allowing developers to override slot content styles.
• Clearly document slots in the component documentation for easy adoption.

Slots in Light DOM

Since we use Light DOM, certain Shadow DOM-specific features are not necessary:

• The assignedNodes() and assignedElements() methods → These are used to retrieve slotted elements inside the Shadow DOM, but in Light DOM, slotted content is directly part of the document structure, so we can access it with standard DOM methods like querySelector.
• The slotchange event → This event is only useful in Shadow DOM to detect changes inside a slot. In Light DOM, since everything is accessible directly, we can simply use a MutationObserver to detect changes in the slot.
• The ::slotted pseudo-element → This CSS pseudo-element applies styles inside a Shadow DOM slot. In Light DOM, regular CSS selectors work just fine.

Using MutationObserver Instead of slotchange

Since we don’t use the slotchange event in Light DOM, the best way to detect content updates inside a slot is by using MutationObserver. Here’s an example:

                                                        
                                                        
                                                            class SlotObserver {
                                                          constructor(component) {
                                                            this.component = component;
                                                            this.observer = new MutationObserver(() => {
                                                              console.log('Slot content has changed!');
                                                            });
                                                          }
                                                        
                                                          observe() {
                                                            const slot = this.component.querySelector('slot');
                                                            if (slot) {
                                                              this.observer.observe(slot, { childList: true, subtree: true });
                                                            }
                                                          }
                                                        }
                                                        
                                                        const myComponent = document.querySelector('nv-fieldtext');
                                                        const observer = new SlotObserver(myComponent);
                                                        observer.observe();
                                                        
                                                            

With this approach, we can efficiently detect changes inside the slot without needing slotchange.