Question about component scope

[andrewtmendoza]

Hi, I was wondering whether a component's CSS and JavaScript are scoped just to that component's markup or if they get applied globally.

Thanks!

[EmilStenstrom]

@andrewtmendoza Globally. CSS and JS are not processed by django-components at all. Therefore you need a unique class and anonymous function as I show in the readme.

[AmalIrfan]

Is it acceptable if to do something like this
components/nav/nav.html

<nav class="nav">
	<ul class="list">
		{% component 'item' link='#' text='Home' %}
		{% component 'item' link='#' text='About' %}
	</ul>
</nav>

in order to extract the repeated code
component/nav/item.html

<li class="item">
	<a class="link" href="{{ link }}">{{ text }}</a>
</li>

the python code for it
component/nav/nav.py

from django_components import component

@component.register("item")
class Item(component.Component):
    template_name = "nav/item.html"

    def get_context_data(self, link, text):
        return {
            "link" : link,
            "text" : text,
        }



@component.register("nav")
class Nav(component.Component):
    template_name = "nav/nav.html"

    def get_context_data(self, page=''):
        return {
            "page": '',
        }

    class Media:
        css = "nav/nav.css"

this works but I am worried it would cause name conflicts on the global level, is there a way I can keep `item` component in the local scope.

[JuroOravec]

@AmalIrfan In case this is still relevant, could you expand on what you mean by:

"is there a way I can keep item component in the local scope."