06

Control Attributes

Lifecycle events, morphing control, and debugging features

data-ignore Demo

The section below is ignored by Datastar (no reactivity):

This content is ignored:

This button outside works normally:

Counter:

data-ignore='self' Demo

Video below won't be disrupted during morphing:

Last update:

data-on-load Demo

Run initialization code when elements load into the DOM:

Auto-fetch user data on load:

Initialize component (with 300ms delay):

Status:

Send analytics when visible:

Analytics sent:

Common uses: API calls, component initialization, analytics tracking, lazy loading

data-json-signals Demo (Debug View)

All signals displayed as JSON:

          

          

            
Filtered signals (only those containing 'counter' or 'time'):


          

        

        

          
slot_attrs Demo

          
Apply attributes to multiple elements based on their data-slot:

          

            
Task Component:

            
Click the checkbox - data_bind is applied via slot_task_check:

            

              
Complete important task✓            

            

Status:             

          

          

            
List with Shared Hover Effects:

            
Hover over items - slot attributes apply styling to ALL matching slots:

            

              

📁Projects12 files              

              

⚙️Settings8 files              

              

📊Analytics24 files              

            

            
Notice: ALL icons, text, and counts change together when hovering ANY item

          

          

            
Form with Validation States:

            
Toggle form validity to see multiple slot attributes in action:


              

                
              

              

                
              

              

⚠️ Please fix errors before submitting              

              

              


            

              

Form status:               

            

          

          
Copy-paste syntax: Use slot_{name}=dict(...) with exact same attributes you'd use on elements directly!