diff --git a/dev/concepts/fundamentals/html_attributes/index.html b/dev/concepts/fundamentals/html_attributes/index.html
index 223ff2f7..9bc995d2 100644
--- a/dev/concepts/fundamentals/html_attributes/index.html
+++ b/dev/concepts/fundamentals/html_attributes/index.html
@@ -283,29 +283,28 @@
"""
def get_template_data ( self , args , kwargs , slots , context ):
-date = kwargs . pop ( "date" )
-return {
-"date" : date ,
-"attrs" : kwargs ,
-"class_from_var" : "extra-class"
-}
-@register ( "parent" )
-class Parent ( Component ):
-template : t.django_html = """
-{% component "my_comp"
-date = date
-attrs : class = "pa-0 border-solid border-red"
-attrs : data-json = json_data
-attrs : @ click = "(e) => onClick(e, 'from_parent')"
-/ %}
-"""
-def get_template_data ( self , args , kwargs , slots , context ):
-return {
-"date" : datetime . now (),
-"json_data" : json . dumps ({ "value" : 456 })
-}
+return {
+"date" : kwargs [ "date" ],
+"attrs" : kwargs . get ( "attrs" , {}),
+"class_from_var" : "extra-class"
+}
+@register ( "parent" )
+class Parent ( Component ):
+template : t.django_html = """
+{% component "my_comp"
+date = date
+attrs : class = "pa-0 border-solid border-red"
+attrs : data-json = json_data
+attrs : @ click = "(e) => onClick(e, 'from_parent')"
+/ %}
+"""
+def get_template_data ( self , args , kwargs , slots , context ):
+return {
+"date" : datetime . now (),
+"json_data" : json . dumps ({ "value" : 456 })
+}
Note: For readability, we've split the tags across multiple lines.
Inside MyComp, we defined a default attribute
So if attrs includes key class, the default above will be ignored.
MyComp also defines class key twice. It means that whether the class attribute is taken from attrs or defaults, the two class values will be appended to it.
So by default, MyComp renders:
< div class = "pa-4 text-red my-comp-date extra-class" data-id = "123" > ...</ div >
Next, let's consider what will be rendered when we call MyComp from Parent component.
MyComp accepts a attrs dictionary, that is passed to html_attrs, so the contents of that dictionary are rendered as the HTML attributes.
In Parent, we make use of passing dictionary key-value pairs as kwargs to define individual attributes as if they were regular kwargs.
So all kwargs that start with attrs: will be collected into an attrs dict.
attrs:class="pa-0 border-solid border-red"
@@ -324,4 +323,4 @@
>
</ div >
-