Guys, I just feel confused because the styling in the sub_component_child does not follow the styling that I've been setting. For example, the main sub_component class is alert alert-info, but in the sub_component_child, it should be alert-primary, but it does not work. or is it just because I used a specific theme from a web editor that did not allow me to do that?

this is my owl_templates.xml:

<!-- Subcomponent template -->

<t t-name="master_purchasing.owl_sub_component">

<div>

<h4>This is an Owl Sub-component template.</h4>

<article class="alert alert-info">

<t t-set-slot="title"/>

<t t-set-slot="date_author"/>

<t t-slot="default"/>

</article>

</div>

</t>

<!-- Inheritance template -->

<t t-inherit="master_purchasing.owl_sub_component" t-inherit-mode="extension">

<xpath expr="//article" position="after">

<p>Added using extension inheritance</p>

</xpath>

</t>

<t

t-name="master_purchasing.owl_sub_component_child"

t-inherit="master_purchasing.owl_sub_component"

t-inherit-mode="primary">

<xpath expr="//article" position="attributes">

<attribute name="class" remove="alert-info" add="alert-primary" separator=" "/>

</xpath>

</t>

Image