django-components/0.141.4/getting_started/adding_slots/index.html

120 lines
No EOL
72 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html><html lang=en class=no-js> <head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=description content="A way to create simple reusable template components in Django."><link href=https://django-components.github.io/django-components/latest/getting_started/adding_slots/ rel=canonical><link href=../parametrising_components/ rel=prev><link href=../rendering_components/ rel=next><link rel=icon href=../../assets/images/favicon.png><meta name=generator content="mkdocs-1.6.1, mkdocs-material-9.6.16"><title>Adding slots - Django-Components</title><link rel=stylesheet href=../../assets/stylesheets/main.7e37652d.min.css><link rel=stylesheet href=../../assets/stylesheets/palette.06af60db.min.css><link rel=preconnect href=https://fonts.gstatic.com crossorigin><link rel=stylesheet href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback"><style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style><link rel=stylesheet href=../../assets/_markdown_exec_pyodide.css><link rel=stylesheet href=../../assets/_mkdocstrings.css><link rel=stylesheet href=../../css/timeago.css><link rel=stylesheet href=../../css/style.css><script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script><meta property=og:type content=website><meta property=og:title content="Adding slots - Django-Components"><meta property=og:description content="A way to create simple reusable template components in Django."><meta property=og:image content=https://django-components.github.io/django-components/latest/assets/images/social/getting_started/adding_slots.png><meta property=og:image:type content=image/png><meta property=og:image:width content=1200><meta property=og:image:height content=630><meta content=https://django-components.github.io/django-components/latest/getting_started/adding_slots/ property=og:url><meta name=twitter:card content=summary_large_image><meta name=twitter:title content="Adding slots - Django-Components"><meta name=twitter:description content="A way to create simple reusable template components in Django."><meta name=twitter:image content=https://django-components.github.io/django-components/latest/assets/images/social/getting_started/adding_slots.png></head> <body dir=ltr data-md-color-scheme=default data-md-color-primary=indigo data-md-color-accent=indigo> <input class=md-toggle data-md-toggle=drawer type=checkbox id=__drawer autocomplete=off> <input class=md-toggle data-md-toggle=search type=checkbox id=__search autocomplete=off> <label class=md-overlay for=__drawer></label> <div data-md-component=skip> <a href=#1-what-are-slots class=md-skip> Skip to content </a> </div> <div data-md-component=announce> </div> <div data-md-color-scheme=default data-md-component=outdated hidden> </div> <header class=md-header data-md-component=header> <nav class="md-header__inner md-grid" aria-label=Header> <a href=../.. title=Django-Components class="md-header__button md-logo" aria-label=Django-Components data-md-component=logo> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg> </a> <label class="md-header__button md-icon" for=__drawer> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg> </label> <div class=md-header__title data-md-component=header-title> <div class=md-header__ellipsis> <div class=md-header__topic> <span class=md-ellipsis> Django-Components </span> </div> <div class=md-header__topic data-md-component=header-topic> <span class=md-ellipsis> Adding slots </span> </div> </div> </div> <form class=md-header__option data-md-component=palette> <input class=md-option data-md-color-media=(prefers-color-scheme) data-md-color-scheme=default data-md-color-primary=indigo data-md-color-accent=indigo aria-label="Switch to light mode" type=radio name=__palette id=__palette_0> <label class="md-header__button md-icon" title="Switch to light mode" for=__palette_1 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="m14.3 16-.7-2h-3.2l-.7 2H7.8L11 7h2l3.2 9zM20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12zm-9.15 3.96h2.3L12 9z"/></svg> </label> <input class=md-option data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme=default data-md-color-primary=teal data-md-color-accent=indigo aria-label="Switch to dark mode" type=radio name=__palette id=__palette_1> <label class="md-header__button md-icon" title="Switch to dark mode" for=__palette_2 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="m17.75 4.09-2.53 1.94.91 3.06-2.63-1.81-2.63 1.81.91-3.06-2.53-1.94L12.44 4l1.06-3 1.06 3zm3.5 6.91-1.64 1.25.59 1.98-1.7-1.17-1.7 1.17.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95zm-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14.4-.4.82-.76 1.27-1.08.75-.53 1.93.36 1.85 1.19-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82-2.81 3.14-2.7 7.96.31 10.98 3.02 3.01 7.84 3.12 10.98.31"/></svg> </label> <input class=md-option data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme=slate data-md-color-primary=teal data-md-color-accent=indigo aria-label="Switch to light mode" type=radio name=__palette id=__palette_2> <label class="md-header__button md-icon" title="Switch to light mode" for=__palette_0 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0-7 2.39 3.42C13.65 5.15 12.84 5 12 5s-1.65.15-2.39.42zM3.34 7l4.16-.35A7.2 7.2 0 0 0 5.94 8.5c-.44.74-.69 1.5-.83 2.29zm.02 10 1.76-3.77a7.131 7.131 0 0 0 2.38 4.14zM20.65 7l-1.77 3.79a7.02 7.02 0 0 0-2.38-4.15zm-.01 10-4.14.36c.59-.51 1.12-1.14 1.54-1.86.42-.73.69-1.5.83-2.29zM12 22l-2.41-3.44c.74.27 1.55.44 2.41.44.82 0 1.63-.17 2.37-.44z"/></svg> </label> </form> <script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script> <label class="md-header__button md-icon" for=__search> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg> </label> <div class=md-search data-md-component=search role=dialog> <label class=md-search__overlay for=__search></label> <div class=md-search__inner role=search> <form class=md-search__form name=search> <input type=text class=md-search__input name=query aria-label=Search placeholder=Search autocapitalize=off autocorrect=off autocomplete=off spellcheck=false data-md-component=search-query required> <label class="md-search__icon md-icon" for=__search> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg> </label> <nav class=md-search__options aria-label=Search> <a href=javascript:void(0) class="md-search__icon md-icon" title=Share aria-label=Share data-clipboard data-clipboard-text data-md-component=search-share tabindex=-1> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66 0 1.61 1.31 2.91 2.92 2.91s2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08"/></svg> </a> <button type=reset class="md-search__icon md-icon" title=Clear aria-label=Clear tabindex=-1> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg> </button> </nav> <div class=md-search__suggest data-md-component=search-suggest></div> </form> <div class=md-search__output> <div class=md-search__scrollwrap tabindex=0 data-md-scrollfix> <div class=md-search-result data-md-component=search-result> <div class=md-search-result__meta> Initializing search </div> <ol class=md-search-result__list role=presentation></ol> </div> </div> </div> </div> </div> <div class=md-header__source> <a href=https://github.com/django-components/django-components title="Go to repository" class=md-source data-md-component=source> <div class="md-source__icon md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 512 512"><!-- Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path fill=currentColor d="M173.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M252.8 8C114.1 8 8 113.3 8 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C436.2 457.8 504 362.9 504 252 504 113.3 391.5 8 252.8 8M105.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg> </div> <div class=md-source__repository> django-components </div> </a> </div> </nav> </header> <div class=md-container data-md-component=container> <nav class=md-tabs aria-label=Tabs data-md-component=tabs> <div class=md-grid> <ul class=md-tabs__list> <li class=md-tabs__item> <a href=../../overview/welcome/ class=md-tabs__link> Overview </a> </li> <li class="md-tabs__item md-tabs__item--active"> <a href=../your_first_component/ class=md-tabs__link> Getting Started </a> </li> <li class=md-tabs__item> <a href=../../concepts/fundamentals/single_file_components/ class=md-tabs__link> Concepts </a> </li> <li class=md-tabs__item> <a href=../../guides/setup/caching/ class=md-tabs__link> Guides </a> </li> <li class=md-tabs__item> <a href=../../reference/api/ class=md-tabs__link> API Documentation </a> </li> <li class=md-tabs__item> <a href=../../release_notes/ class=md-tabs__link> Release Notes </a> </li> </ul> </div> </nav> <main class=md-main data-md-component=main> <div class="md-main__inner md-grid"> <div class="md-sidebar md-sidebar--primary" data-md-component=sidebar data-md-type=navigation> <div class=md-sidebar__scrollwrap> <div class=md-sidebar__inner> <nav class="md-nav md-nav--primary md-nav--lifted" aria-label=Navigation data-md-level=0> <label class=md-nav__title for=__drawer> <a href=../.. title=Django-Components class="md-nav__button md-logo" aria-label=Django-Components data-md-component=logo> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg> </a> Django-Components </label> <div class=md-nav__source> <a href=https://github.com/django-components/django-components title="Go to repository" class=md-source data-md-component=source> <div class="md-source__icon md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 512 512"><!-- Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path fill=currentColor d="M173.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M252.8 8C114.1 8 8 113.3 8 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C436.2 457.8 504 362.9 504 252 504 113.3 391.5 8 252.8 8M105.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg> </div> <div class=md-source__repository> django-components </div> </a> </div> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_1> <label class=md-nav__link for=__nav_1 id=__nav_1_label tabindex=0> <span class=md-ellipsis> Overview </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_1_label aria-expanded=false> <label class=md-nav__title for=__nav_1> <span class="md-nav__icon md-icon"></span> Overview </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../overview/welcome/ class=md-nav__link> <span class=md-ellipsis> Welcome to Django Components </span> </a> </li> <li class=md-nav__item> <a href=../../overview/compatibility/ class=md-nav__link> <span class=md-ellipsis> Compatibility </span> </a> </li> <li class=md-nav__item> <a href=../../overview/installation/ class=md-nav__link> <span class=md-ellipsis> Installation </span> </a> </li> <li class=md-nav__item> <a href=../../overview/security_notes/ class=md-nav__link> <span class=md-ellipsis> Security notes 🚨 </span> </a> </li> <li class=md-nav__item> <a href=../../overview/migrating/ class=md-nav__link> <span class=md-ellipsis> Migrating </span> </a> </li> <li class=md-nav__item> <a href=../../overview/community/ class=md-nav__link> <span class=md-ellipsis> Community </span> </a> </li> <li class=md-nav__item> <a href=../../overview/contributing/ class=md-nav__link> <span class=md-ellipsis> Contributing </span> </a> </li> <li class=md-nav__item> <a href=../../overview/development/ class=md-nav__link> <span class=md-ellipsis> Development </span> </a> </li> <li class=md-nav__item> <a href=../../overview/performance/ class=md-nav__link> <span class=md-ellipsis> Performance </span> </a> </li> <li class=md-nav__item> <a href=../../overview/code_of_conduct/ class=md-nav__link> <span class=md-ellipsis> Code of Conduct </span> </a> </li> <li class=md-nav__item> <a href=../../overview/license/ class=md-nav__link> <span class=md-ellipsis> License </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_2 checked> <label class=md-nav__link for=__nav_2 id=__nav_2_label tabindex> <span class=md-ellipsis> Getting Started </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_2_label aria-expanded=true> <label class=md-nav__title for=__nav_2> <span class="md-nav__icon md-icon"></span> Getting Started </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../your_first_component/ class=md-nav__link> <span class=md-ellipsis> Create your first component </span> </a> </li> <li class=md-nav__item> <a href=../adding_js_and_css/ class=md-nav__link> <span class=md-ellipsis> Adding JS and CSS </span> </a> </li> <li class=md-nav__item> <a href=../components_in_templates/ class=md-nav__link> <span class=md-ellipsis> Components in templates </span> </a> </li> <li class=md-nav__item> <a href=../parametrising_components/ class=md-nav__link> <span class=md-ellipsis> Parametrising components </span> </a> </li> <li class="md-nav__item md-nav__item--active"> <input class="md-nav__toggle md-toggle" type=checkbox id=__toc> <label class="md-nav__link md-nav__link--active" for=__toc> <span class=md-ellipsis> Adding slots </span> <span class="md-nav__icon md-icon"></span> </label> <a href=./ class="md-nav__link md-nav__link--active"> <span class=md-ellipsis> Adding slots </span> </a> <nav class="md-nav md-nav--secondary" aria-label="Table of contents"> <label class=md-nav__title for=__toc> <span class="md-nav__icon md-icon"></span> Table of contents </label> <ul class=md-nav__list data-md-component=toc data-md-scrollfix> <li class=md-nav__item> <a href=#1-what-are-slots class=md-nav__link> <span class=md-ellipsis> 1. What are slots </span> </a> </li> <li class=md-nav__item> <a href=#2-add-a-slot-tag class=md-nav__link> <span class=md-ellipsis> 2. Add a slot tag </span> </a> </li> <li class=md-nav__item> <a href=#3-add-fill-tag class=md-nav__link> <span class=md-ellipsis> 3. Add fill tag </span> </a> </li> <li class=md-nav__item> <a href=#4-wait-theres-a-bug class=md-nav__link> <span class=md-ellipsis> 4. Wait, there's a bug </span> </a> </li> <li class=md-nav__item> <a href=#5-adding-data-to-slots class=md-nav__link> <span class=md-ellipsis> 5. Adding data to slots </span> </a> </li> <li class=md-nav__item> <a href=#6-accessing-slot-data-in-fills class=md-nav__link> <span class=md-ellipsis> 6. Accessing slot data in fills </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../rendering_components/ class=md-nav__link> <span class=md-ellipsis> Rendering components </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_3> <label class=md-nav__link for=__nav_3 id=__nav_3_label tabindex=0> <span class=md-ellipsis> Concepts </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_3_label aria-expanded=false> <label class=md-nav__title for=__nav_3> <span class="md-nav__icon md-icon"></span> Concepts </label> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_3_1> <label class=md-nav__link for=__nav_3_1 id=__nav_3_1_label tabindex=0> <span class=md-ellipsis> Fundamentals </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_3_1_label aria-expanded=false> <label class=md-nav__title for=__nav_3_1> <span class="md-nav__icon md-icon"></span> Fundamentals </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../concepts/fundamentals/single_file_components/ class=md-nav__link> <span class=md-ellipsis> Single-file components </span> </a> </li> <li class=md-nav__item> <a href=../../concepts/fundamentals/html_js_css_files/ class=md-nav__link> <span class=md-ellipsis> HTML / JS / CSS files </span> </a> </li> <li class=md-nav__item> <a href=../../concepts/fundamentals/html_js_css_variables/ class=md-nav__link> <span class=md-ellipsis> HTML / JS / CSS variables </span> </a> </li> <li class=md-nav__item> <a href=../../concepts/fundamentals/secondary_js_css_files/ class=md-nav__link> <span class=md-ellipsis> Secondary JS / CSS files </span> </a> </li> <li class=md-nav__item> <a href=../../concepts/fundamentals/component_defaults/ class=md-nav__link> <span class=md-ellipsis> Component defaults </span> </a> </li> <li class=md-nav__item> <a href=../../concepts/fundamentals/render_api/ class=md-nav__link> <span class=md-ellipsis> Render API </span> </a> </li> <li class=md-nav__item> <a href=../../concepts/fundamentals/rendering_components/ class=md-nav__link> <span class=md-ellipsis> Rendering components </span> </a> </li> <li class=md-nav__item> <a href=../../concepts/fundamentals/slots/ class=md-nav__link> <span class=md-ellipsis> Slots </span> </a> </li> <li class=md-nav__item> <a href=../../concepts/fundamentals/template_tag_syntax/ class=md-nav__link> <span class=md-ellipsis> Template tag syntax </span> </a> </li> <li class=md-nav__item> <a href=../../concepts/fundamentals/html_attributes/ class=md-nav__link> <span class=md-ellipsis> HTML attributes </span> </a> </li> <li class=md-nav__item> <a href=../../concepts/fundamentals/component_views_urls/ class=md-nav__link> <span class=md-ellipsis> Component views and URLs </span> </a> </li> <li class=md-nav__item> <a href=../../concepts/fundamentals/http_request/ class=md-nav__link> <span class=md-ellipsis> HTTP Request </span> </a> </li> <li class=md-nav__item> <a href=../../concepts/fundamentals/typing_and_validation/ class=md-nav__link> <span class=md-ellipsis> Typing and validation </span> </a> </li> <li class=md-nav__item> <a href=../../concepts/fundamentals/subclassing_components/ class=md-nav__link> <span class=md-ellipsis> Subclassing components </span> </a> </li> <li class=md-nav__item> <a href=../../concepts/fundamentals/autodiscovery/ class=md-nav__link> <span class=md-ellipsis> Autodiscovery </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_3_2> <label class=md-nav__link for=__nav_3_2 id=__nav_3_2_label tabindex=0> <span class=md-ellipsis> Advanced </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_3_2_label aria-expanded=false> <label class=md-nav__title for=__nav_3_2> <span class="md-nav__icon md-icon"></span> Advanced </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../concepts/advanced/rendering_js_css/ class=md-nav__link> <span class=md-ellipsis> Rendering JS / CSS </span> </a> </li> <li class=md-nav__item> <a href=../../concepts/advanced/html_fragments/ class=md-nav__link> <span class=md-ellipsis> HTML fragments </span> </a> </li> <li class=md-nav__item> <a href=../../concepts/advanced/provide_inject/ class=md-nav__link> <span class=md-ellipsis> Prop drilling and provide / inject </span> </a> </li> <li class=md-nav__item> <a href=../../concepts/advanced/hooks/ class=md-nav__link> <span class=md-ellipsis> Lifecycle hooks </span> </a> </li> <li class=md-nav__item> <a href=../../concepts/advanced/component_registry/ class=md-nav__link> <span class=md-ellipsis> Registering components </span> </a> </li> <li class=md-nav__item> <a href=../../concepts/advanced/component_caching/ class=md-nav__link> <span class=md-ellipsis> Component caching </span> </a> </li> <li class=md-nav__item> <a href=../../concepts/advanced/component_context_scope/ class=md-nav__link> <span class=md-ellipsis> Component context and scope </span> </a> </li> <li class=md-nav__item> <a href=../../concepts/advanced/template_tags/ class=md-nav__link> <span class=md-ellipsis> Custom template tags </span> </a> </li> <li class=md-nav__item> <a href=../../concepts/advanced/tag_formatters/ class=md-nav__link> <span class=md-ellipsis> Tag formatters </span> </a> </li> <li class=md-nav__item> <a href=../../concepts/advanced/extensions/ class=md-nav__link> <span class=md-ellipsis> Extensions </span> </a> </li> <li class=md-nav__item> <a href=../../concepts/advanced/testing/ class=md-nav__link> <span class=md-ellipsis> Testing </span> </a> </li> <li class=md-nav__item> <a href=../../concepts/advanced/component_libraries/ class=md-nav__link> <span class=md-ellipsis> Component libraries </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_4> <label class=md-nav__link for=__nav_4 id=__nav_4_label tabindex=0> <span class=md-ellipsis> Guides </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_4_label aria-expanded=false> <label class=md-nav__title for=__nav_4> <span class="md-nav__icon md-icon"></span> Guides </label> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_4_1> <label class=md-nav__link for=__nav_4_1 id=__nav_4_1_label tabindex=0> <span class=md-ellipsis> Setup </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_4_1_label aria-expanded=false> <label class=md-nav__title for=__nav_4_1> <span class="md-nav__icon md-icon"></span> Setup </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../guides/setup/caching/ class=md-nav__link> <span class=md-ellipsis> Caching </span> </a> </li> <li class=md-nav__item> <a href=../../guides/setup/development_server/ class=md-nav__link> <span class=md-ellipsis> Development server </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_4_2> <label class=md-nav__link for=__nav_4_2 id=__nav_4_2_label tabindex=0> <span class=md-ellipsis> Other </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_4_2_label aria-expanded=false> <label class=md-nav__title for=__nav_4_2> <span class="md-nav__icon md-icon"></span> Other </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../guides/other/troubleshooting/ class=md-nav__link> <span class=md-ellipsis> Troubleshooting </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_4_3> <label class=md-nav__link for=__nav_4_3 id=__nav_4_3_label tabindex=0> <span class=md-ellipsis> Dev Guides </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_4_3_label aria-expanded=false> <label class=md-nav__title for=__nav_4_3> <span class="md-nav__icon md-icon"></span> Dev Guides </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../guides/devguides/dependency_mgmt/ class=md-nav__link> <span class=md-ellipsis> JS and CSS rendering </span> </a> </li> <li class=md-nav__item> <a href=../../guides/devguides/slot_rendering/ class=md-nav__link> <span class=md-ellipsis> Slot rendering </span> </a> </li> <li class=md-nav__item> <a href=../../guides/devguides/slots_and_blocks/ class=md-nav__link> <span class=md-ellipsis> Using slot and block tags </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_5> <label class=md-nav__link for=__nav_5 id=__nav_5_label tabindex=0> <span class=md-ellipsis> API Documentation </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_5_label aria-expanded=false> <label class=md-nav__title for=__nav_5> <span class="md-nav__icon md-icon"></span> API Documentation </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../reference/api/ class=md-nav__link> <span class=md-ellipsis> API </span> </a> </li> <li class=md-nav__item> <a href=../../reference/commands/ class=md-nav__link> <span class=md-ellipsis> CLI commands </span> </a> </li> <li class=md-nav__item> <a href=../../reference/components/ class=md-nav__link> <span class=md-ellipsis> Components </span> </a> </li> <li class=md-nav__item> <a href=../../reference/exceptions/ class=md-nav__link> <span class=md-ellipsis> Exceptions </span> </a> </li> <li class=md-nav__item> <a href=../../reference/extension_hooks/ class=md-nav__link> <span class=md-ellipsis> Extension hooks </span> </a> </li> <li class=md-nav__item> <a href=../../reference/extension_commands/ class=md-nav__link> <span class=md-ellipsis> Extension commands API </span> </a> </li> <li class=md-nav__item> <a href=../../reference/extension_urls/ class=md-nav__link> <span class=md-ellipsis> Extension URLs API </span> </a> </li> <li class=md-nav__item> <a href=../../reference/settings/ class=md-nav__link> <span class=md-ellipsis> Settings </span> </a> </li> <li class=md-nav__item> <a href=../../reference/signals/ class=md-nav__link> <span class=md-ellipsis> Signals </span> </a> </li> <li class=md-nav__item> <a href=../../reference/tag_formatters/ class=md-nav__link> <span class=md-ellipsis> Tag formatters </span> </a> </li> <li class=md-nav__item> <a href=../../reference/template_tags/ class=md-nav__link> <span class=md-ellipsis> Template tags </span> </a> </li> <li class=md-nav__item> <a href=../../reference/template_variables/ class=md-nav__link> <span class=md-ellipsis> Template variables </span> </a> </li> <li class=md-nav__item> <a href=../../reference/urls/ class=md-nav__link> <span class=md-ellipsis> URLs </span> </a> </li> <li class=md-nav__item> <a href=../../reference/testing_api/ class=md-nav__link> <span class=md-ellipsis> Testing API </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../../release_notes/ class=md-nav__link> <span class=md-ellipsis> Release Notes </span> </a> </li> </ul> </nav> </div> </div> </div> <div class="md-sidebar md-sidebar--secondary" data-md-component=sidebar data-md-type=toc> <div class=md-sidebar__scrollwrap> <div class=md-sidebar__inner> <nav class="md-nav md-nav--secondary" aria-label="Table of contents"> <label class=md-nav__title for=__toc> <span class="md-nav__icon md-icon"></span> Table of contents </label> <ul class=md-nav__list data-md-component=toc data-md-scrollfix> <li class=md-nav__item> <a href=#1-what-are-slots class=md-nav__link> <span class=md-ellipsis> 1. What are slots </span> </a> </li> <li class=md-nav__item> <a href=#2-add-a-slot-tag class=md-nav__link> <span class=md-ellipsis> 2. Add a slot tag </span> </a> </li> <li class=md-nav__item> <a href=#3-add-fill-tag class=md-nav__link> <span class=md-ellipsis> 3. Add fill tag </span> </a> </li> <li class=md-nav__item> <a href=#4-wait-theres-a-bug class=md-nav__link> <span class=md-ellipsis> 4. Wait, there's a bug </span> </a> </li> <li class=md-nav__item> <a href=#5-adding-data-to-slots class=md-nav__link> <span class=md-ellipsis> 5. Adding data to slots </span> </a> </li> <li class=md-nav__item> <a href=#6-accessing-slot-data-in-fills class=md-nav__link> <span class=md-ellipsis> 6. Accessing slot data in fills </span> </a> </li> </ul> </nav> </div> </div> </div> <div class=md-content data-md-component=content> <article class="md-content__inner md-typeset"> <a href=https://github.com/django-components/django-components/edit/master/docs/getting_started/adding_slots.md title="Edit this page" class="md-content__button md-icon" rel=edit> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M10 20H6V4h7v5h5v3.1l2-2V8l-6-6H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h4zm10.2-7c.1 0 .3.1.4.2l1.3 1.3c.2.2.2.6 0 .8l-1 1-2.1-2.1 1-1c.1-.1.2-.2.4-.2m0 3.9L14.1 23H12v-2.1l6.1-6.1z"/></svg> </a> <a href=https://github.com/django-components/django-components/raw/master/docs/getting_started/adding_slots.md title="View source of this page" class="md-content__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M17 18c.56 0 1 .44 1 1s-.44 1-1 1-1-.44-1-1 .44-1 1-1m0-3c-2.73 0-5.06 1.66-6 4 .94 2.34 3.27 4 6 4s5.06-1.66 6-4c-.94-2.34-3.27-4-6-4m0 6.5a2.5 2.5 0 0 1-2.5-2.5 2.5 2.5 0 0 1 2.5-2.5 2.5 2.5 0 0 1 2.5 2.5 2.5 2.5 0 0 1-2.5 2.5M9.27 20H6V4h7v5h5v4.07c.7.08 1.36.25 2 .49V8l-6-6H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h4.5a8.2 8.2 0 0 1-1.23-2"/></svg> </a> <h1>Adding slots</h1> <p>Our calendar component's looking great! But we just got a new assignment from our colleague - The calendar date needs to be shown on 3 different pages:</p> <ol> <li>On one page, it needs to be shown as is</li> <li>On the second, the date needs to be <strong>bold</strong></li> <li>On the third, the date needs to be in <em>italics</em></li> </ol> <p>As a reminder, this is what the component's template looks like:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=p>&lt;</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>&quot;calendar&quot;</span><span class=p>&gt;</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> Today&#39;s date is <span class=p>&lt;</span><span class=nt>span</span><span class=p>&gt;</span><span class=cp>{{</span> <span class=nv>date</span> <span class=cp>}}</span><span class=p>&lt;/</span><span class=nt>span</span><span class=p>&gt;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
</code></pre></div> <p>There's many ways we could approach this:</p> <ul> <li>Expose the date in a slot</li> <li>Style <code>.calendar &gt; span</code> differently on different pages</li> <li>Pass a variable to the component that decides how the date is rendered</li> <li>Create a new component</li> </ul> <p>First two options are more flexible, because the custom styling is not baked into a component's implementation. And for the sake of demonstration, we'll solve this challenge with slots.</p> <h3 id=1-what-are-slots>1. What are slots<a class=headerlink href=#1-what-are-slots title="Permanent link">¤</a></h3> <p>Components support something called <a href=../../concepts/fundamentals/slots>Slots</a>.</p> <p>When a component is used inside another template, slots allow the parent template to override specific parts of the child component by passing in different content.</p> <p>This mechanism makes components more reusable and composable.</p> <p>This behavior is similar to <a href=https://vuejs.org/guide/components/slots.html>slots in Vue</a>.</p> <p>In the example below we introduce two tags that work hand in hand to make this work. These are...</p> <ul> <li><code>{% slot &lt;name&gt; %}</code>/<code>{% endslot %}</code>: Declares a new slot in the component template.</li> <li><code>{% fill &lt;name&gt; %}</code>/<code>{% endfill %}</code>: (Used inside a <a href=../../reference/template_tags#component><code>{% component %}</code></a> tag pair.) Fills a declared slot with the specified content.</li> </ul> <h3 id=2-add-a-slot-tag>2. Add a slot tag<a class=headerlink href=#2-add-a-slot-tag title="Permanent link">¤</a></h3> <p>Let's update our calendar component to support more customization. We'll add <a href=../../reference/template_tags#slot><code>{% slot %}</code></a> tag to the template:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=p>&lt;</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>&quot;calendar&quot;</span><span class=p>&gt;</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> Today&#39;s date is
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;date&quot;</span> <span class=nv>default</span> <span class=cp>%}</span> <span class=c>{# &lt;--- new #}</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a> <span class=p>&lt;</span><span class=nt>span</span><span class=p>&gt;</span><span class=cp>{{</span> <span class=nv>date</span> <span class=cp>}}</span><span class=p>&lt;/</span><span class=nt>span</span><span class=p>&gt;</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a> <span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a><span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
</code></pre></div> <p>Notice that:</p> <ol> <li> <p>We named the slot <code>date</code> - so we can fill this slot by using <code>{% fill "date" %}</code></p> </li> <li> <p>We also made it the <a href=../../concepts/fundamentals/slots#default-slot>default slot</a>.</p> </li> <li> <p>We placed our original implementation inside the <a href=../../reference/template_tags#slot><code>{% slot %}</code></a> tag - this is what will be rendered when the slot is NOT overriden.</p> </li> </ol> <h3 id=3-add-fill-tag>3. Add fill tag<a class=headerlink href=#3-add-fill-tag title="Permanent link">¤</a></h3> <p>Now we can use <a href=../../reference/template_tags#fill><code>{% fill %}</code></a> tags inside the <a href=../../reference/template_tags#component><code>{% component %}</code></a> tags to override the <code>date</code> slot to generate the bold and italics variants:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=c>{# Default #}</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;calendar&quot;</span> <span class=nv>date</span><span class=o>=</span><span class=s2>&quot;2024-12-13&quot;</span> <span class=o>/</span> <span class=cp>%}</span>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a><span class=c>{# Bold #}</span>
<a id=__codelineno-2-5 name=__codelineno-2-5 href=#__codelineno-2-5></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;calendar&quot;</span> <span class=nv>date</span><span class=o>=</span><span class=s2>&quot;2024-12-13&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-2-6 name=__codelineno-2-6 href=#__codelineno-2-6></a> <span class=p>&lt;</span><span class=nt>b</span><span class=p>&gt;</span> 2024-12-13 <span class=p>&lt;/</span><span class=nt>b</span><span class=p>&gt;</span>
<a id=__codelineno-2-7 name=__codelineno-2-7 href=#__codelineno-2-7></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
<a id=__codelineno-2-8 name=__codelineno-2-8 href=#__codelineno-2-8></a>
<a id=__codelineno-2-9 name=__codelineno-2-9 href=#__codelineno-2-9></a><span class=c>{# Italics #}</span>
<a id=__codelineno-2-10 name=__codelineno-2-10 href=#__codelineno-2-10></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;calendar&quot;</span> <span class=nv>date</span><span class=o>=</span><span class=s2>&quot;2024-12-13&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-2-11 name=__codelineno-2-11 href=#__codelineno-2-11></a> <span class=p>&lt;</span><span class=nt>i</span><span class=p>&gt;</span> 2024-12-13 <span class=p>&lt;/</span><span class=nt>i</span><span class=p>&gt;</span>
<a id=__codelineno-2-12 name=__codelineno-2-12 href=#__codelineno-2-12></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
</code></pre></div> <p>Which will render as:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=cm>&lt;!-- Default --&gt;</span>
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a><span class=p>&lt;</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>&quot;calendar&quot;</span><span class=p>&gt;</span>
<a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a> Today&#39;s date is <span class=p>&lt;</span><span class=nt>span</span><span class=p>&gt;</span>2024-12-13<span class=p>&lt;/</span><span class=nt>span</span><span class=p>&gt;</span>
<a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a><span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-3-5 name=__codelineno-3-5 href=#__codelineno-3-5></a>
<a id=__codelineno-3-6 name=__codelineno-3-6 href=#__codelineno-3-6></a><span class=cm>&lt;!-- Bold --&gt;</span>
<a id=__codelineno-3-7 name=__codelineno-3-7 href=#__codelineno-3-7></a><span class=p>&lt;</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>&quot;calendar&quot;</span><span class=p>&gt;</span>
<a id=__codelineno-3-8 name=__codelineno-3-8 href=#__codelineno-3-8></a> Today&#39;s date is <span class=p>&lt;</span><span class=nt>b</span><span class=p>&gt;</span>2024-12-13<span class=p>&lt;/</span><span class=nt>b</span><span class=p>&gt;</span>
<a id=__codelineno-3-9 name=__codelineno-3-9 href=#__codelineno-3-9></a><span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-3-10 name=__codelineno-3-10 href=#__codelineno-3-10></a>
<a id=__codelineno-3-11 name=__codelineno-3-11 href=#__codelineno-3-11></a><span class=cm>&lt;!-- Italics --&gt;</span>
<a id=__codelineno-3-12 name=__codelineno-3-12 href=#__codelineno-3-12></a><span class=p>&lt;</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>&quot;calendar&quot;</span><span class=p>&gt;</span>
<a id=__codelineno-3-13 name=__codelineno-3-13 href=#__codelineno-3-13></a> Today&#39;s date is <span class=p>&lt;</span><span class=nt>i</span><span class=p>&gt;</span>2024-12-13<span class=p>&lt;/</span><span class=nt>i</span><span class=p>&gt;</span>
<a id=__codelineno-3-14 name=__codelineno-3-14 href=#__codelineno-3-14></a><span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
</code></pre></div> <div class="admonition info"> <p class=admonition-title>Info</p> <p>Since we used the <code>default</code> flag on <code>{% slot "date" %}</code> inside our calendar component, we can target the <code>date</code> component in multiple ways:</p> <ol> <li> <p>Explicitly by it's name <div class=highlight><pre><span></span><code><a id=__codelineno-4-1 name=__codelineno-4-1 href=#__codelineno-4-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;calendar&quot;</span> <span class=nv>date</span><span class=o>=</span><span class=s2>&quot;2024-12-13&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-4-2 name=__codelineno-4-2 href=#__codelineno-4-2></a> <span class=cp>{%</span> <span class=k>fill</span> <span class=s2>&quot;date&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-4-3 name=__codelineno-4-3 href=#__codelineno-4-3></a> <span class=p>&lt;</span><span class=nt>i</span><span class=p>&gt;</span> 2024-12-13 <span class=p>&lt;/</span><span class=nt>i</span><span class=p>&gt;</span>
<a id=__codelineno-4-4 name=__codelineno-4-4 href=#__codelineno-4-4></a> <span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
<a id=__codelineno-4-5 name=__codelineno-4-5 href=#__codelineno-4-5></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
</code></pre></div></p> </li> <li> <p>Implicitly as the <a href=../../concepts/fundamentals/slots#default-slot>default slot</a> (Omitting the <a href=../../reference/template_tags#fill><code>{% fill %}</code></a> tag) <div class=highlight><pre><span></span><code><a id=__codelineno-5-1 name=__codelineno-5-1 href=#__codelineno-5-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;calendar&quot;</span> <span class=nv>date</span><span class=o>=</span><span class=s2>&quot;2024-12-13&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-5-2 name=__codelineno-5-2 href=#__codelineno-5-2></a> <span class=p>&lt;</span><span class=nt>i</span><span class=p>&gt;</span> 2024-12-13 <span class=p>&lt;/</span><span class=nt>i</span><span class=p>&gt;</span>
<a id=__codelineno-5-3 name=__codelineno-5-3 href=#__codelineno-5-3></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
</code></pre></div></p> </li> <li> <p>Explicitly as the <a href=../../concepts/fundamentals/slots#default-slot>default slot</a> (Setting fill name to <code>default</code>) <div class=highlight><pre><span></span><code><a id=__codelineno-6-1 name=__codelineno-6-1 href=#__codelineno-6-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;calendar&quot;</span> <span class=nv>date</span><span class=o>=</span><span class=s2>&quot;2024-12-13&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-6-2 name=__codelineno-6-2 href=#__codelineno-6-2></a> <span class=cp>{%</span> <span class=k>fill</span> <span class=s2>&quot;default&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-6-3 name=__codelineno-6-3 href=#__codelineno-6-3></a> <span class=p>&lt;</span><span class=nt>i</span><span class=p>&gt;</span> 2024-12-13 <span class=p>&lt;/</span><span class=nt>i</span><span class=p>&gt;</span>
<a id=__codelineno-6-4 name=__codelineno-6-4 href=#__codelineno-6-4></a> <span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
<a id=__codelineno-6-5 name=__codelineno-6-5 href=#__codelineno-6-5></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
</code></pre></div></p> </li> </ol> </div> <h3 id=4-wait-theres-a-bug>4. Wait, there's a bug<a class=headerlink href=#4-wait-theres-a-bug title="Permanent link">¤</a></h3> <p>There is a mistake in our code! <code>2024-12-13</code> is Friday, so that's fine. But if we updated the to <code>2024-12-14</code>, which is Saturday, our template from previous step would render this:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-7-1 name=__codelineno-7-1 href=#__codelineno-7-1></a><span class=cm>&lt;!-- Default --&gt;</span>
<a id=__codelineno-7-2 name=__codelineno-7-2 href=#__codelineno-7-2></a><span class=p>&lt;</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>&quot;calendar&quot;</span><span class=p>&gt;</span>
<a id=__codelineno-7-3 name=__codelineno-7-3 href=#__codelineno-7-3></a> Today&#39;s date is <span class=p>&lt;</span><span class=nt>span</span><span class=p>&gt;</span>2024-12-16<span class=p>&lt;/</span><span class=nt>span</span><span class=p>&gt;</span>
<a id=__codelineno-7-4 name=__codelineno-7-4 href=#__codelineno-7-4></a><span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-7-5 name=__codelineno-7-5 href=#__codelineno-7-5></a>
<a id=__codelineno-7-6 name=__codelineno-7-6 href=#__codelineno-7-6></a><span class=cm>&lt;!-- Bold --&gt;</span>
<a id=__codelineno-7-7 name=__codelineno-7-7 href=#__codelineno-7-7></a><span class=p>&lt;</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>&quot;calendar&quot;</span><span class=p>&gt;</span>
<a id=__codelineno-7-8 name=__codelineno-7-8 href=#__codelineno-7-8></a> Today&#39;s date is <span class=p>&lt;</span><span class=nt>b</span><span class=p>&gt;</span>2024-12-14<span class=p>&lt;/</span><span class=nt>b</span><span class=p>&gt;</span>
<a id=__codelineno-7-9 name=__codelineno-7-9 href=#__codelineno-7-9></a><span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-7-10 name=__codelineno-7-10 href=#__codelineno-7-10></a>
<a id=__codelineno-7-11 name=__codelineno-7-11 href=#__codelineno-7-11></a><span class=cm>&lt;!-- Italics --&gt;</span>
<a id=__codelineno-7-12 name=__codelineno-7-12 href=#__codelineno-7-12></a><span class=p>&lt;</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>&quot;calendar&quot;</span><span class=p>&gt;</span>
<a id=__codelineno-7-13 name=__codelineno-7-13 href=#__codelineno-7-13></a> Today&#39;s date is <span class=p>&lt;</span><span class=nt>i</span><span class=p>&gt;</span>2024-12-14<span class=p>&lt;/</span><span class=nt>i</span><span class=p>&gt;</span>
<a id=__codelineno-7-14 name=__codelineno-7-14 href=#__codelineno-7-14></a><span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
</code></pre></div> <p>The first instance rendered <code>2024-12-16</code>, while the rest rendered <code>2024-12-14</code>!</p> <p>Why? Remember that in the <a href=../../reference/api#django_components.Component.get_template_data><code>get_template_data()</code></a> method of our Calendar component, we pre-process the date. If the date falls on Saturday or Sunday, we shift it to next Monday:</p> <div class=highlight><span class=filename>[project root]/components/calendar/calendar.py</span><pre><span></span><code><a id=__codelineno-8-1 name=__codelineno-8-1 href=#__codelineno-8-1></a><span class=kn>from</span><span class=w> </span><span class=nn>datetime</span><span class=w> </span><span class=kn>import</span> <span class=n>date</span>
<a id=__codelineno-8-2 name=__codelineno-8-2 href=#__codelineno-8-2></a>
<a id=__codelineno-8-3 name=__codelineno-8-3 href=#__codelineno-8-3></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>register</span>
<a id=__codelineno-8-4 name=__codelineno-8-4 href=#__codelineno-8-4></a>
<a id=__codelineno-8-5 name=__codelineno-8-5 href=#__codelineno-8-5></a><span class=c1># If date is Sat or Sun, shift it to next Mon, so the date is always workweek.</span>
<a id=__codelineno-8-6 name=__codelineno-8-6 href=#__codelineno-8-6></a><span class=k>def</span><span class=w> </span><span class=nf>to_workweek_date</span><span class=p>(</span><span class=n>d</span><span class=p>:</span> <span class=n>date</span><span class=p>):</span>
<a id=__codelineno-8-7 name=__codelineno-8-7 href=#__codelineno-8-7></a> <span class=o>...</span>
<a id=__codelineno-8-8 name=__codelineno-8-8 href=#__codelineno-8-8></a>
<a id=__codelineno-8-9 name=__codelineno-8-9 href=#__codelineno-8-9></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;calendar&quot;</span><span class=p>)</span>
<a id=__codelineno-8-10 name=__codelineno-8-10 href=#__codelineno-8-10></a><span class=k>class</span><span class=w> </span><span class=nc>Calendar</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-8-11 name=__codelineno-8-11 href=#__codelineno-8-11></a> <span class=n>template_file</span> <span class=o>=</span> <span class=s2>&quot;calendar.html&quot;</span>
<a id=__codelineno-8-12 name=__codelineno-8-12 href=#__codelineno-8-12></a> <span class=o>...</span>
<a id=__codelineno-8-13 name=__codelineno-8-13 href=#__codelineno-8-13></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-8-14 name=__codelineno-8-14 href=#__codelineno-8-14></a> <span class=n>workweek_date</span> <span class=o>=</span> <span class=n>to_workweek_date</span><span class=p>(</span><span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;date&quot;</span><span class=p>])</span>
<a id=__codelineno-8-15 name=__codelineno-8-15 href=#__codelineno-8-15></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-8-16 name=__codelineno-8-16 href=#__codelineno-8-16></a> <span class=s2>&quot;date&quot;</span><span class=p>:</span> <span class=n>workweek_date</span><span class=p>,</span>
<a id=__codelineno-8-17 name=__codelineno-8-17 href=#__codelineno-8-17></a> <span class=s2>&quot;extra_class&quot;</span><span class=p>:</span> <span class=n>kwargs</span><span class=o>.</span><span class=n>get</span><span class=p>(</span><span class=s2>&quot;extra_class&quot;</span><span class=p>,</span> <span class=s2>&quot;text-blue&quot;</span><span class=p>),</span>
<a id=__codelineno-8-18 name=__codelineno-8-18 href=#__codelineno-8-18></a> <span class=p>}</span>
</code></pre></div> <p>And the issue is that in our template, we used the <code>date</code> value that we used <em>as input</em>, which is NOT the same as the <code>date</code> variable used inside Calendar's template.</p> <h3 id=5-adding-data-to-slots>5. Adding data to slots<a class=headerlink href=#5-adding-data-to-slots title="Permanent link">¤</a></h3> <p>We want to use the same <code>date</code> variable that's used inside Calendar's template.</p> <p>Luckily, django-components allows <a href=../../concepts/fundamentals/slots#slot-data>passing data to slots</a>, also known as <a href=https://vuejs.org/guide/components/slots#scoped-slots>Scoped slots</a>.</p> <p>This consists of two steps:</p> <ol> <li>Pass the <code>date</code> variable to the <a href=../../reference/template_tags#slot><code>{% slot %}</code></a> tag</li> <li>Access the <code>date</code> variable in the <a href=../../reference/template_tags#fill><code>{% fill %}</code></a> tag by using the special <code>data</code> kwarg</li> </ol> <p>Let's update the Calendar's template:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-9-1 name=__codelineno-9-1 href=#__codelineno-9-1></a><span class=p>&lt;</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>&quot;calendar&quot;</span><span class=p>&gt;</span>
<a id=__codelineno-9-2 name=__codelineno-9-2 href=#__codelineno-9-2></a> Today&#39;s date is
<a id=__codelineno-9-3 name=__codelineno-9-3 href=#__codelineno-9-3></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;date&quot;</span> <span class=nv>default</span> <span class=nv>date</span><span class=o>=</span><span class=nv>date</span> <span class=cp>%}</span> <span class=c>{# &lt;--- changed #}</span>
<a id=__codelineno-9-4 name=__codelineno-9-4 href=#__codelineno-9-4></a> <span class=p>&lt;</span><span class=nt>span</span><span class=p>&gt;</span><span class=cp>{{</span> <span class=nv>date</span> <span class=cp>}}</span><span class=p>&lt;/</span><span class=nt>span</span><span class=p>&gt;</span>
<a id=__codelineno-9-5 name=__codelineno-9-5 href=#__codelineno-9-5></a> <span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
<a id=__codelineno-9-6 name=__codelineno-9-6 href=#__codelineno-9-6></a><span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
</code></pre></div> <div class="admonition info"> <p class=admonition-title>Info</p> <p>The <a href=../../reference/template_tags#slot><code>{% slot %}</code></a> tag has one special kwarg, <code>name</code>. When you write</p> <div class=highlight><pre><span></span><code><a id=__codelineno-10-1 name=__codelineno-10-1 href=#__codelineno-10-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;date&quot;</span> <span class=o>/</span> <span class=cp>%}</span>
</code></pre></div> <p>It's the same as:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-11-1 name=__codelineno-11-1 href=#__codelineno-11-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=nv>name</span><span class=o>=</span><span class=s2>&quot;date&quot;</span> <span class=o>/</span> <span class=cp>%}</span>
</code></pre></div> <p>Other than the <code>name</code> kwarg, you can pass any extra kwargs to the <a href=../../reference/template_tags#slot><code>{% slot %}</code></a> tag, and these will be exposed as the slot's data.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-12-1 name=__codelineno-12-1 href=#__codelineno-12-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=nv>name</span><span class=o>=</span><span class=s2>&quot;date&quot;</span> <span class=nv>kwarg1</span><span class=o>=</span><span class=m>123</span> <span class=nv>kwarg2</span><span class=o>=</span><span class=s2>&quot;text&quot;</span> <span class=nv>kwarg3</span><span class=o>=</span><span class=nv>my_var</span> <span class=o>/</span> <span class=cp>%}</span>
</code></pre></div> </div> <h3 id=6-accessing-slot-data-in-fills>6. Accessing slot data in fills<a class=headerlink href=#6-accessing-slot-data-in-fills title="Permanent link">¤</a></h3> <p>Now, on the <a href=../../reference/template_tags#fill><code>{% fill %}</code></a> tags, we can use the <code>data</code> kwarg to specify the variable under which the slot data will be available.</p> <p>The variable from the <code>data</code> kwarg contains all the extra kwargs passed to the <a href=../../reference/template_tags#slot><code>{% slot %}</code></a> tag.</p> <p>So if we set <code>data="slot_data"</code>, then we can access the date variable under <code>slot_data.date</code>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-13-1 name=__codelineno-13-1 href=#__codelineno-13-1></a><span class=c>{# Default #}</span>
<a id=__codelineno-13-2 name=__codelineno-13-2 href=#__codelineno-13-2></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;calendar&quot;</span> <span class=nv>date</span><span class=o>=</span><span class=s2>&quot;2024-12-13&quot;</span> <span class=o>/</span> <span class=cp>%}</span>
<a id=__codelineno-13-3 name=__codelineno-13-3 href=#__codelineno-13-3></a>
<a id=__codelineno-13-4 name=__codelineno-13-4 href=#__codelineno-13-4></a><span class=c>{# Bold #}</span>
<a id=__codelineno-13-5 name=__codelineno-13-5 href=#__codelineno-13-5></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;calendar&quot;</span> <span class=nv>date</span><span class=o>=</span><span class=s2>&quot;2024-12-13&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-13-6 name=__codelineno-13-6 href=#__codelineno-13-6></a> <span class=cp>{%</span> <span class=k>fill</span> <span class=s2>&quot;date&quot;</span> <span class=nv>data</span><span class=o>=</span><span class=s2>&quot;slot_data&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-13-7 name=__codelineno-13-7 href=#__codelineno-13-7></a> <span class=p>&lt;</span><span class=nt>b</span><span class=p>&gt;</span> <span class=cp>{{</span> <span class=nv>slot_data.date</span> <span class=cp>}}</span> <span class=p>&lt;/</span><span class=nt>b</span><span class=p>&gt;</span>
<a id=__codelineno-13-8 name=__codelineno-13-8 href=#__codelineno-13-8></a> <span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
<a id=__codelineno-13-9 name=__codelineno-13-9 href=#__codelineno-13-9></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
<a id=__codelineno-13-10 name=__codelineno-13-10 href=#__codelineno-13-10></a>
<a id=__codelineno-13-11 name=__codelineno-13-11 href=#__codelineno-13-11></a><span class=c>{# Italics #}</span>
<a id=__codelineno-13-12 name=__codelineno-13-12 href=#__codelineno-13-12></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;calendar&quot;</span> <span class=nv>date</span><span class=o>=</span><span class=s2>&quot;2024-12-13&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-13-13 name=__codelineno-13-13 href=#__codelineno-13-13></a> <span class=cp>{%</span> <span class=k>fill</span> <span class=s2>&quot;date&quot;</span> <span class=nv>data</span><span class=o>=</span><span class=s2>&quot;slot_data&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-13-14 name=__codelineno-13-14 href=#__codelineno-13-14></a> <span class=p>&lt;</span><span class=nt>i</span><span class=p>&gt;</span> <span class=cp>{{</span> <span class=nv>slot_data.date</span> <span class=cp>}}</span> <span class=p>&lt;/</span><span class=nt>i</span><span class=p>&gt;</span>
<a id=__codelineno-13-15 name=__codelineno-13-15 href=#__codelineno-13-15></a> <span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
<a id=__codelineno-13-16 name=__codelineno-13-16 href=#__codelineno-13-16></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
</code></pre></div> <p>By using the <code>date</code> variable from the slot, we'll render the correct date each time:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-14-1 name=__codelineno-14-1 href=#__codelineno-14-1></a><span class=cm>&lt;!-- Default --&gt;</span>
<a id=__codelineno-14-2 name=__codelineno-14-2 href=#__codelineno-14-2></a><span class=p>&lt;</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>&quot;calendar&quot;</span><span class=p>&gt;</span>
<a id=__codelineno-14-3 name=__codelineno-14-3 href=#__codelineno-14-3></a> Today&#39;s date is <span class=p>&lt;</span><span class=nt>span</span><span class=p>&gt;</span>2024-12-16<span class=p>&lt;/</span><span class=nt>span</span><span class=p>&gt;</span>
<a id=__codelineno-14-4 name=__codelineno-14-4 href=#__codelineno-14-4></a><span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-14-5 name=__codelineno-14-5 href=#__codelineno-14-5></a>
<a id=__codelineno-14-6 name=__codelineno-14-6 href=#__codelineno-14-6></a><span class=cm>&lt;!-- Bold --&gt;</span>
<a id=__codelineno-14-7 name=__codelineno-14-7 href=#__codelineno-14-7></a><span class=p>&lt;</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>&quot;calendar&quot;</span><span class=p>&gt;</span>
<a id=__codelineno-14-8 name=__codelineno-14-8 href=#__codelineno-14-8></a> Today&#39;s date is <span class=p>&lt;</span><span class=nt>b</span><span class=p>&gt;</span>2024-12-16<span class=p>&lt;/</span><span class=nt>b</span><span class=p>&gt;</span>
<a id=__codelineno-14-9 name=__codelineno-14-9 href=#__codelineno-14-9></a><span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-14-10 name=__codelineno-14-10 href=#__codelineno-14-10></a>
<a id=__codelineno-14-11 name=__codelineno-14-11 href=#__codelineno-14-11></a><span class=cm>&lt;!-- Italics --&gt;</span>
<a id=__codelineno-14-12 name=__codelineno-14-12 href=#__codelineno-14-12></a><span class=p>&lt;</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>&quot;calendar&quot;</span><span class=p>&gt;</span>
<a id=__codelineno-14-13 name=__codelineno-14-13 href=#__codelineno-14-13></a> Today&#39;s date is <span class=p>&lt;</span><span class=nt>i</span><span class=p>&gt;</span>2024-12-16<span class=p>&lt;/</span><span class=nt>i</span><span class=p>&gt;</span>
<a id=__codelineno-14-14 name=__codelineno-14-14 href=#__codelineno-14-14></a><span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
</code></pre></div> <div class="admonition info"> <p class=admonition-title>Info</p> <p><strong>When to use slots vs variables?</strong></p> <p>Generally, slots are more flexible - you can access the slot data, even the original slot content. Thus, slots behave more like functions that render content based on their context.</p> <p>On the other hand, variables are simpler - the variable you pass to a component is what will be used.</p> <p>Moreover, slots are treated as part of the template - for example the CSS scoping (work in progress) is applied to the slot content too.</p> </div> <hr> <p>So far we've rendered components using template tag. [Next, lets explore other ways to render components ➡️] (./rendering_components.md)</p> <aside class=md-source-file> <span class=md-source-file__fact> <span class=md-icon title="Last update"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M21 13.1c-.1 0-.3.1-.4.2l-1 1 2.1 2.1 1-1c.2-.2.2-.6 0-.8l-1.3-1.3c-.1-.1-.2-.2-.4-.2m-1.9 1.8-6.1 6V23h2.1l6.1-6.1zM12.5 7v5.2l4 2.4-1 1L11 13V7zM11 21.9c-5.1-.5-9-4.8-9-9.9C2 6.5 6.5 2 12 2c5.3 0 9.6 4.1 10 9.3-.3-.1-.6-.2-1-.2s-.7.1-1 .2C19.6 7.2 16.2 4 12 4c-4.4 0-8 3.6-8 8 0 4.1 3.1 7.5 7.1 7.9l-.1.2z"/></svg> </span> <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-timeago" title="July 7, 2025 16:30:15 UTC"><span class=timeago datetime=2025-07-07T16:30:15+00:00 locale=en></span></span><span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-iso_date" title="July 7, 2025 16:30:15 UTC">2025-07-07</span> </span> <span class=md-source-file__fact> <span class=md-icon title=Contributors> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 5.5A3.5 3.5 0 0 1 15.5 9a3.5 3.5 0 0 1-3.5 3.5A3.5 3.5 0 0 1 8.5 9 3.5 3.5 0 0 1 12 5.5M5 8c.56 0 1.08.15 1.53.42-.15 1.43.27 2.85 1.13 3.96C7.16 13.34 6.16 14 5 14a3 3 0 0 1-3-3 3 3 0 0 1 3-3m14 0a3 3 0 0 1 3 3 3 3 0 0 1-3 3c-1.16 0-2.16-.66-2.66-1.62a5.54 5.54 0 0 0 1.13-3.96c.45-.27.97-.42 1.53-.42M5.5 18.25c0-2.07 2.91-3.75 6.5-3.75s6.5 1.68 6.5 3.75V20h-13zM0 20v-1.5c0-1.39 1.89-2.56 4.45-2.9-.59.68-.95 1.62-.95 2.65V20zm24 0h-3.5v-1.75c0-1.03-.36-1.97-.95-2.65 2.56.34 4.45 1.51 4.45 2.9z"/></svg> </span> <nav> <a href=mailto:antoliny0919@gmail.com>Antoliny Lee</a>, <a href=mailto:juraj.oravec.josefson@gmail.com>Juro Oravec</a> </nav> </span> </aside> </article> </div> <script>var tabs=__md_get("__tabs");if(Array.isArray(tabs))e:for(var set of document.querySelectorAll(".tabbed-set")){var labels=set.querySelector(".tabbed-labels");for(var tab of tabs)for(var label of labels.getElementsByTagName("label"))if(label.innerText.trim()===tab){var input=document.getElementById(label.htmlFor);input.checked=!0;continue e}}</script> <script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script> </div> <button type=button class="md-top md-icon" data-md-component=top hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg> Back to top </button> </main> <footer class=md-footer> <nav class="md-footer__inner md-grid" aria-label=Footer> <a href=../parametrising_components/ class="md-footer__link md-footer__link--prev" aria-label="Previous: Parametrising components"> <div class="md-footer__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg> </div> <div class=md-footer__title> <span class=md-footer__direction> Previous </span> <div class=md-ellipsis> Parametrising components </div> </div> </a> <a href=../rendering_components/ class="md-footer__link md-footer__link--next" aria-label="Next: Rendering components"> <div class=md-footer__title> <span class=md-footer__direction> Next </span> <div class=md-ellipsis> Rendering components </div> </div> <div class="md-footer__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg> </div> </a> </nav> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> Made with <a href=https://squidfunk.github.io/mkdocs-material/ target=_blank rel=noopener> Material for MkDocs </a> </div> <div class=md-social> <a href=https://github.com/django-components/django-components target=_blank rel=noopener title=github.com class=md-social__link> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 512 512"><!-- Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path fill=currentColor d="M173.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M252.8 8C114.1 8 8 113.3 8 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C436.2 457.8 504 362.9 504 252 504 113.3 391.5 8 252.8 8M105.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg> </a> <a href=https://pypi.org/project/django-components/ target=_blank rel=noopener title=pypi.org class=md-social__link> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 448 512"><!-- Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path fill=currentColor d="M439.8 200.5c-7.7-30.9-22.3-54.2-53.4-54.2h-40.1v47.4c0 36.8-31.2 67.8-66.8 67.8H172.7c-29.2 0-53.4 25-53.4 54.3v101.8c0 29 25.2 46 53.4 54.3 33.8 9.9 66.3 11.7 106.8 0 26.9-7.8 53.4-23.5 53.4-54.3v-40.7H226.2v-13.6h160.2c31.1 0 42.6-21.7 53.4-54.2 11.2-33.5 10.7-65.7 0-108.6M286.2 444.7a20.4 20.4 0 1 1 0-40.7 20.4 20.4 0 1 1 0 40.7M167.8 248.1h106.8c29.7 0 53.4-24.5 53.4-54.3V91.9c0-29-24.4-50.7-53.4-55.6-35.8-5.9-74.7-5.6-106.8.1-45.2 8-53.4 24.7-53.4 55.6v40.7h106.9v13.6h-147c-31.1 0-58.3 18.7-66.8 54.2-9.8 40.7-10.2 66.1 0 108.6 7.6 31.6 25.7 54.2 56.8 54.2H101v-48.8c0-35.3 30.5-66.4 66.8-66.4m-6.6-183.4a20.4 20.4 0 1 1 0 40.8 20.4 20.4 0 1 1 0-40.8"/></svg> </a> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <div class=md-progress data-md-component=progress role=progressbar></div> <script id=__config type=application/json>{"base": "../..", "features": ["content.action.edit", "content.action.view", "content.code.annotate", "content.code.copy", "content.tabs.link", "navigation.expand", "navigation.footer", "navigation.instant", "navigation.instant.progress", "navigation.indexes", "navigation.sections", "navigation.tabs", "navigation.tracking", "navigation.top", "search.highlight", "search.share", "search.suggest", "toc.follow"], "search": "../../assets/javascripts/workers/search.d50fe291.min.js", "tags": null, "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"alias": true, "default": ["dev"], "provider": "mike"}}</script> <script src=../../assets/javascripts/bundle.50899def.min.js></script> <script src=../../assets/_markdown_exec_pyodide.js></script> <script src=../../js/timeago.min.js></script> <script src=../../js/timeago_mkdocs_material.js></script> </body> </html>