[{"data":1,"prerenderedAt":3528},["ShallowReactive",2],{"docs-side-nav":3,"docs-header-nav":197,"/docs/components":270,"docs-bottom-nav":3455},{"id":4,"extension":5,"items":6,"meta":194,"stem":195,"__hash__":196},"navigation/data/navigation.json","json",[7,34,46,70,104,155,170],{"name":8,"items":9},"Getting Started",[10,13,16,19,22,25,28,31],{"title":11,"path":12},"What is Maizzle?","/docs/introduction",{"title":14,"path":15},"Installation","/docs/installation",{"title":17,"path":18},"Editor Setup","/docs/editor-setup",{"title":20,"path":21},"Compatibility","/docs/compatibility",{"title":23,"path":24},"Upgrade Guide","/docs/upgrade-guide",{"title":26,"path":27},"Resources","/resources",{"title":29,"path":30},"Glossary","/glossary",{"title":32,"path":33},"CLI","/docs/cli",{"name":35,"items":36},"Concepts",[37,40,43],{"title":38,"path":39},"Environments","/docs/environments",{"title":41,"path":42},"Tailwind CSS","/docs/tailwindcss",{"title":44,"path":45},"Build Process","/docs/build-process",{"name":47,"items":48},"Configuration",[49,52,55,58,61,64,67],{"title":50,"path":51},"CSS","/docs/configuration/css",{"title":53,"path":54},"Build","/docs/configuration/build",{"title":56,"path":57},"Server","/docs/configuration/server",{"title":59,"path":60},"Components","/docs/configuration/components",{"title":62,"path":63},"Expressions","/docs/configuration/expressions",{"title":65,"path":66},"PostHTML","/docs/configuration/posthtml",{"title":68,"path":69},"PostCSS","/docs/configuration/postcss",{"name":71,"items":72},"Development",[73,76,79,81,83,86,89,92,95,98,101],{"title":74,"path":75},"Layouts","/docs/layouts",{"title":77,"path":78},"Templates","/docs/templates",{"title":59,"path":80},"/docs/components",{"title":62,"path":82},"/docs/expressions",{"title":84,"path":85},"Tags","/docs/tags",{"title":87,"path":88},"Assets","/docs/assets",{"title":90,"path":91},"Events","/docs/events",{"title":93,"path":94},"Functions","/docs/functions",{"title":96,"path":97},"Markdown","/docs/markdown",{"title":99,"path":100},"Plaintext","/docs/plaintext",{"title":102,"path":103},"API","/docs/api",{"name":105,"items":106},"Transformers",[107,110,113,116,119,122,125,128,131,134,137,140,143,146,149,152],{"title":108,"path":109},"What are Transformers?","/docs/transformers",{"title":111,"path":112},"Filters","/docs/transformers/filters",{"title":114,"path":115},"Inline CSS","/docs/transformers/inline-css",{"title":117,"path":118},"Safe Selectors","/docs/transformers/safe-class-names",{"title":120,"path":121},"CSS Purging","/docs/transformers/purge-css",{"title":123,"path":124},"Shorthand CSS","/docs/transformers/shorthand-css",{"title":126,"path":127},"Attribute To Style","/docs/transformers/attribute-to-style",{"title":129,"path":130},"Remove Attributes","/docs/transformers/remove-attributes",{"title":132,"path":133},"Add Attributes","/docs/transformers/add-attributes",{"title":135,"path":136},"Replace Strings","/docs/transformers/replace-strings",{"title":138,"path":139},"Widow Words","/docs/transformers/widows",{"title":141,"path":142},"URL Parameters","/docs/transformers/url-parameters",{"title":144,"path":145},"Base URL","/docs/transformers/base-url",{"title":147,"path":148},"Six HEX","/docs/transformers/six-hex",{"title":150,"path":151},"Prettify","/docs/transformers/prettify",{"title":153,"path":154},"Minify","/docs/transformers/minify",{"name":156,"items":157},"Starter Components",[158,161,164,167],{"title":159,"path":160},"Spacer","/docs/components/spacer",{"title":162,"path":163},"Divider","/docs/components/divider",{"title":165,"path":166},"Button","/docs/components/button",{"title":168,"path":169},"VML","/docs/components/vml",{"name":171,"items":172},"Examples",[173,176,179,182,185,188,191],{"title":174,"path":175},"Spacers","/docs/examples/spacers",{"title":177,"path":178},"Dividers","/docs/examples/dividers",{"title":180,"path":181},"Buttons","/docs/examples/buttons",{"title":183,"path":184},"Cards","/docs/examples/cards",{"title":186,"path":187},"Grids","/docs/examples/grids",{"title":189,"path":190},"Google Fonts","/docs/examples/google-fonts",{"title":192,"path":193},"Reverse Stack","/docs/examples/reverse-stack",{},"data/navigation","lXnN10nQFMOp0U7LPKSlEiRFYPoRC0dC5rgvZn8-pes",{"id":4,"extension":5,"items":198,"meta":269,"stem":195,"__hash__":196},[199,209,214,223,236,254,260],{"name":8,"items":200},[201,202,203,204,205,206,207,208],{"title":11,"path":12},{"title":14,"path":15},{"title":17,"path":18},{"title":20,"path":21},{"title":23,"path":24},{"title":26,"path":27},{"title":29,"path":30},{"title":32,"path":33},{"name":35,"items":210},[211,212,213],{"title":38,"path":39},{"title":41,"path":42},{"title":44,"path":45},{"name":47,"items":215},[216,217,218,219,220,221,222],{"title":50,"path":51},{"title":53,"path":54},{"title":56,"path":57},{"title":59,"path":60},{"title":62,"path":63},{"title":65,"path":66},{"title":68,"path":69},{"name":71,"items":224},[225,226,227,228,229,230,231,232,233,234,235],{"title":74,"path":75},{"title":77,"path":78},{"title":59,"path":80},{"title":62,"path":82},{"title":84,"path":85},{"title":87,"path":88},{"title":90,"path":91},{"title":93,"path":94},{"title":96,"path":97},{"title":99,"path":100},{"title":102,"path":103},{"name":105,"items":237},[238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253],{"title":108,"path":109},{"title":111,"path":112},{"title":114,"path":115},{"title":117,"path":118},{"title":120,"path":121},{"title":123,"path":124},{"title":126,"path":127},{"title":129,"path":130},{"title":132,"path":133},{"title":135,"path":136},{"title":138,"path":139},{"title":141,"path":142},{"title":144,"path":145},{"title":147,"path":148},{"title":150,"path":151},{"title":153,"path":154},{"name":156,"items":255},[256,257,258,259],{"title":159,"path":160},{"title":162,"path":163},{"title":165,"path":166},{"title":168,"path":169},{"name":171,"items":261},[262,263,264,265,266,267,268],{"title":174,"path":175},{"title":177,"path":178},{"title":180,"path":181},{"title":183,"path":184},{"title":186,"path":187},{"title":189,"path":190},{"title":192,"path":193},{},{"id":271,"title":59,"body":272,"description":3448,"extension":3449,"meta":3450,"navigation":884,"path":80,"seo":3451,"sitemap":3452,"stem":3453,"__hash__":3454},"docs/docs/components.md",{"type":273,"value":274,"toc":3415},"minimark",[275,279,283,288,295,343,350,379,382,408,412,418,444,457,459,483,486,489,503,507,518,525,561,564,619,628,632,638,686,692,705,709,715,718,760,763,790,796,800,807,846,853,910,914,917,920,975,978,1058,1061,1128,1132,1135,1211,1215,1225,1286,1292,1360,1364,1371,1432,1436,1504,1508,1515,1526,1605,1609,1614,1617,1689,1695,1747,1753,1790,1794,1805,1812,1818,1952,1965,1968,2030,2032,2061,2064,2076,2079,2201,2207,2266,2270,2273,2283,2387,2394,2410,2416,2424,2449,2453,2458,2464,2571,2621,2626,2676,2680,2683,2686,2714,2740,2743,2772,2776,2783,2786,2876,2978,2987,3010,3013,3060,3069,3075,3099,3102,3148,3152,3155,3160,3226,3230,3235,3292,3296,3299,3314,3318,3326,3330,3337,3341,3348,3379,3386,3412],[276,277,59],"h1",{"id":278},"components",[280,281,282],"p",{},"Components help you organize blocks of markup into files that can be referenced throughout your project with simple, declarative syntax.",[284,285,287],"h2",{"id":286},"usage","Usage",[280,289,290,291,294],{},"To create a Component, add an HTML file in ",[292,293,278],"code",{},":",[296,297,303],"pre",{"className":298,"code":299,"filename":300,"language":301,"meta":302,"style":302},"language-html shiki shiki-themes tailwind-css tailwind-css","\u003Cdiv>\n  \u003Cyield />\n\u003C/div>\n","components/alert.html","html","",[292,304,305,321,333],{"__ignoreMap":302},[306,307,310,314,318],"span",{"class":308,"line":309},"line",1,[306,311,313],{"class":312},"soJEP","\u003C",[306,315,317],{"class":316},"sizJ4","div",[306,319,320],{"class":312},">\n",[306,322,324,327,330],{"class":308,"line":323},2,[306,325,326],{"class":312},"  \u003C",[306,328,329],{"class":316},"yield",[306,331,332],{"class":312}," />\n",[306,334,336,339,341],{"class":308,"line":335},3,[306,337,338],{"class":312},"\u003C/",[306,340,317],{"class":316},[306,342,320],{"class":312},[280,344,345,346,349],{},"The ",[292,347,348],{},"\u003Cyield />"," tag will be replaced with the content passed to the Component:",[296,351,354],{"className":298,"code":352,"filename":353,"language":301,"meta":302,"style":302},"\u003Cx-alert>\n  This text will replace the `yield` tag in the Component.\n\u003C/x-alert>\n","emails/example.html",[292,355,356,365,371],{"__ignoreMap":302},[306,357,358,360,363],{"class":308,"line":309},[306,359,313],{"class":312},[306,361,362],{"class":316},"x-alert",[306,364,320],{"class":312},[306,366,367],{"class":308,"line":323},[306,368,370],{"class":369},"sfCc6","  This text will replace the `yield` tag in the Component.\n",[306,372,373,375,377],{"class":308,"line":335},[306,374,338],{"class":312},[306,376,362],{"class":316},[306,378,320],{"class":312},[280,380,381],{},"Result:",[296,383,386],{"className":298,"code":384,"filename":385,"language":301,"meta":302,"style":302},"\u003Cdiv>\n  This text will replace the `yield` tag in the Component.\n\u003C/div>\n","build_production/example.html",[292,387,388,396,400],{"__ignoreMap":302},[306,389,390,392,394],{"class":308,"line":309},[306,391,313],{"class":312},[306,393,317],{"class":316},[306,395,320],{"class":312},[306,397,398],{"class":308,"line":323},[306,399,370],{"class":369},[306,401,402,404,406],{"class":308,"line":335},[306,403,338],{"class":312},[306,405,317],{"class":316},[306,407,320],{"class":312},[284,409,411],{"id":410},"includes","Includes",[280,413,414,415,417],{},"You can safely omit the ",[292,416,348],{}," tag if you want to use Components as includes, and don't actually need to pass any content to them:",[296,419,421],{"className":298,"code":420,"filename":300,"language":301,"meta":302,"style":302},"\u003Cdiv>\n  This is a Component used as an include.\n\u003C/div>\n",[292,422,423,431,436],{"__ignoreMap":302},[306,424,425,427,429],{"class":308,"line":309},[306,426,313],{"class":312},[306,428,317],{"class":316},[306,430,320],{"class":312},[306,432,433],{"class":308,"line":323},[306,434,435],{"class":369},"  This is a Component used as an include.\n",[306,437,438,440,442],{"class":308,"line":335},[306,439,338],{"class":312},[306,441,317],{"class":316},[306,443,320],{"class":312},[296,445,447],{"className":298,"code":446,"filename":353,"language":301,"meta":302,"style":302},"\u003Cx-alert />\n",[292,448,449],{"__ignoreMap":302},[306,450,451,453,455],{"class":308,"line":309},[306,452,313],{"class":312},[306,454,362],{"class":316},[306,456,332],{"class":312},[280,458,381],{},[296,460,461],{"className":298,"code":420,"filename":385,"language":301,"meta":302,"style":302},[292,462,463,471,475],{"__ignoreMap":302},[306,464,465,467,469],{"class":308,"line":309},[306,466,313],{"class":312},[306,468,317],{"class":316},[306,470,320],{"class":312},[306,472,473],{"class":308,"line":323},[306,474,435],{"class":369},[306,476,477,479,481],{"class":308,"line":335},[306,478,338],{"class":312},[306,480,317],{"class":316},[306,482,320],{"class":312},[284,484,84],{"id":485},"tags",[280,487,488],{},"There are two ways to use Components:",[490,491,492,496],"ul",{},[493,494,495],"li",{},"through the x-tag syntax",[493,497,498,499,502],{},"through the ",[292,500,501],{},"\u003Ccomponent>"," tag",[504,505,506],"h3",{"id":506},"x-tag",[280,508,509,510,513,514,517],{},"Component names are automatically registered and can be used without having to specify their file path, by using a Blade-like syntax: start with the string ",[292,511,512],{},"x-"," followed by the ",[292,515,516],{},"kebab-case"," name of the component file.",[280,519,520,521,524],{},"For example, let's use the ",[292,522,523],{},"alert.html"," Component we created earlier:",[296,526,528],{"className":298,"code":527,"filename":353,"language":301,"meta":302,"style":302},"\u003Cx-alert>\n  This text will replace the \u003Cyield /> tag in the Component.\n\u003C/x-alert>\n",[292,529,530,538,553],{"__ignoreMap":302},[306,531,532,534,536],{"class":308,"line":309},[306,533,313],{"class":312},[306,535,362],{"class":316},[306,537,320],{"class":312},[306,539,540,543,545,547,550],{"class":308,"line":323},[306,541,542],{"class":369},"  This text will replace the ",[306,544,313],{"class":312},[306,546,329],{"class":316},[306,548,549],{"class":312}," />",[306,551,552],{"class":369}," tag in the Component.\n",[306,554,555,557,559],{"class":308,"line":335},[306,556,338],{"class":312},[306,558,362],{"class":316},[306,560,320],{"class":312},[280,562,563],{},"The following naming convention is used:",[565,566,567,580],"table",{},[568,569,570],"thead",{},[571,572,573,577],"tr",{},[574,575,576],"th",{},"Component file",[574,578,579],{},"x-tag syntax",[581,582,583,595,607],"tbody",{},[571,584,585,590],{},[586,587,588],"td",{},[292,589,523],{},[586,591,592],{},[292,593,594],{},"\u003Cx-alert>",[571,596,597,602],{},[586,598,599],{},[292,600,601],{},"alert_info.html",[586,603,604],{},[292,605,606],{},"\u003Cx-alert_info>",[571,608,609,614],{},[586,610,611],{},[292,612,613],{},"AlertInfo.html",[586,615,616],{},[292,617,618],{},"\u003Cx-alertinfo>",[280,620,621,622,627],{},"As you can see, the second and last examples are not very readable, which is why we recommend using a ",[623,624,626],"a",{"href":625},"#nested-file-structure","nested file structure"," instead.",[504,629,631],{"id":630},"component-tag","\u003Ccomponent> tag",[280,633,634,635,637],{},"Alternatively, you may use the ",[292,636,501],{}," tag to insert a Component:",[296,639,641],{"className":298,"code":640,"filename":353,"language":301,"meta":302,"style":302},"\u003Ccomponent src=\"components/alert.html\">\n  This text will replace the \u003Cyield /> tag in the Component.\n\u003C/component>\n",[292,642,643,666,678],{"__ignoreMap":302},[306,644,645,647,650,654,657,660,662,664],{"class":308,"line":309},[306,646,313],{"class":312},[306,648,649],{"class":316},"component",[306,651,653],{"class":652},"sQMLp"," src",[306,655,656],{"class":312},"=",[306,658,659],{"class":652},"\"",[306,661,300],{"class":369},[306,663,659],{"class":652},[306,665,320],{"class":312},[306,667,668,670,672,674,676],{"class":308,"line":323},[306,669,542],{"class":369},[306,671,313],{"class":312},[306,673,329],{"class":316},[306,675,549],{"class":312},[306,677,552],{"class":369},[306,679,680,682,684],{"class":308,"line":335},[306,681,338],{"class":312},[306,683,649],{"class":316},[306,685,320],{"class":312},[280,687,345,688,691],{},[292,689,690],{},"src"," attribute is mandatory and it needs to point to the Component's file path, relative to the project root.\nIf you're used to partials that you simply include in your HTML, this may look more familiar.",[693,694,696,697,699,700,704],"alert",{"type":695},"warning","\nThe \n",[292,698,690],{},"\n attribute is reserved on Components, make sure not to use it as a \n",[623,701,703],{"href":702},"#props","prop","\n name.\n",[284,706,708],{"id":707},"nested-file-structure","Nested file structure",[280,710,711,712,714],{},"If a Component is nested deeper within your ",[292,713,278],{}," directory, you can reference it through dot notation.",[280,716,717],{},"For example, consider the following Component:",[296,719,722],{"className":298,"code":720,"filename":721,"language":301,"meta":302,"style":302},"\u003Ca href=\"https://maizzle.com\">\n  \u003Cyield />\n\u003C/a>\n","components/button/alt.html",[292,723,724,744,752],{"__ignoreMap":302},[306,725,726,728,730,733,735,737,740,742],{"class":308,"line":309},[306,727,313],{"class":312},[306,729,623],{"class":316},[306,731,732],{"class":652}," href",[306,734,656],{"class":312},[306,736,659],{"class":652},[306,738,739],{"class":369},"https://maizzle.com",[306,741,659],{"class":652},[306,743,320],{"class":312},[306,745,746,748,750],{"class":308,"line":323},[306,747,326],{"class":312},[306,749,329],{"class":316},[306,751,332],{"class":312},[306,753,754,756,758],{"class":308,"line":335},[306,755,338],{"class":312},[306,757,623],{"class":316},[306,759,320],{"class":312},[280,761,762],{},"You may reference it like this:",[296,764,766],{"className":298,"code":765,"filename":353,"language":301,"meta":302,"style":302},"\u003Cx-button.alt>\n  Go to website\n\u003C/x-button.alt>\n",[292,767,768,777,782],{"__ignoreMap":302},[306,769,770,772,775],{"class":308,"line":309},[306,771,313],{"class":312},[306,773,774],{"class":316},"x-button.alt",[306,776,320],{"class":312},[306,778,779],{"class":308,"line":323},[306,780,781],{"class":369},"  Go to website\n",[306,783,784,786,788],{"class":308,"line":335},[306,785,338],{"class":312},[306,787,774],{"class":316},[306,789,320],{"class":312},[280,791,792,793,795],{},"The nested folder path comes after ",[292,794,512],{},", and the file name comes after the dot.",[504,797,799],{"id":798},"index-files","Index files",[280,801,802,803,806],{},"If you add an ",[292,804,805],{},"index.html"," Component inside a nested directory, you can also reference it without its file name part:",[296,808,810],{"className":298,"code":720,"filename":809,"language":301,"meta":302,"style":302},"components/button/index.html",[292,811,812,830,838],{"__ignoreMap":302},[306,813,814,816,818,820,822,824,826,828],{"class":308,"line":309},[306,815,313],{"class":312},[306,817,623],{"class":316},[306,819,732],{"class":652},[306,821,656],{"class":312},[306,823,659],{"class":652},[306,825,739],{"class":369},[306,827,659],{"class":652},[306,829,320],{"class":312},[306,831,832,834,836],{"class":308,"line":323},[306,833,326],{"class":312},[306,835,329],{"class":316},[306,837,332],{"class":312},[306,839,840,842,844],{"class":308,"line":335},[306,841,338],{"class":312},[306,843,623],{"class":316},[306,845,320],{"class":312},[280,847,848,849,852],{},"Both of these will work and use the same ",[292,850,851],{},"button/index.html"," Component:",[296,854,856],{"className":298,"code":855,"filename":353,"language":301,"meta":302,"style":302},"\u003Cx-button>\n  Go to website\n\u003C/x-button>\n\n\u003Cx-button.index>\n  Go to website\n\u003C/x-button.index>\n",[292,857,858,867,871,879,886,896,901],{"__ignoreMap":302},[306,859,860,862,865],{"class":308,"line":309},[306,861,313],{"class":312},[306,863,864],{"class":316},"x-button",[306,866,320],{"class":312},[306,868,869],{"class":308,"line":323},[306,870,781],{"class":369},[306,872,873,875,877],{"class":308,"line":335},[306,874,338],{"class":312},[306,876,864],{"class":316},[306,878,320],{"class":312},[306,880,882],{"class":308,"line":881},4,[306,883,885],{"emptyLinePlaceholder":884},true,"\n",[306,887,889,891,894],{"class":308,"line":888},5,[306,890,313],{"class":312},[306,892,893],{"class":316},"x-button.index",[306,895,320],{"class":312},[306,897,899],{"class":308,"line":898},6,[306,900,781],{"class":369},[306,902,904,906,908],{"class":308,"line":903},7,[306,905,338],{"class":312},[306,907,893],{"class":316},[306,909,320],{"class":312},[284,911,913],{"id":912},"slots","Slots",[280,915,916],{},"A Component may define slots, which act as placeholders that can be replaced (filled) with code when you use it.",[280,918,919],{},"For example, let's create a banner Component with a slot for a custom title:",[296,921,924],{"className":298,"code":922,"filename":923,"language":301,"meta":302,"style":302},"\u003Cdiv role=\"banner\">\n  \u003Cslot:title />\n\n  \u003Cyield />\n\u003C/div>\n","components/banner.html",[292,925,926,946,955,959,967],{"__ignoreMap":302},[306,927,928,930,932,935,937,939,942,944],{"class":308,"line":309},[306,929,313],{"class":312},[306,931,317],{"class":316},[306,933,934],{"class":652}," role",[306,936,656],{"class":312},[306,938,659],{"class":652},[306,940,941],{"class":369},"banner",[306,943,659],{"class":652},[306,945,320],{"class":312},[306,947,948,950,953],{"class":308,"line":323},[306,949,326],{"class":312},[306,951,952],{"class":316},"slot:title",[306,954,332],{"class":312},[306,956,957],{"class":308,"line":335},[306,958,885],{"emptyLinePlaceholder":884},[306,960,961,963,965],{"class":308,"line":881},[306,962,326],{"class":312},[306,964,329],{"class":316},[306,966,332],{"class":312},[306,968,969,971,973],{"class":308,"line":888},[306,970,338],{"class":312},[306,972,317],{"class":316},[306,974,320],{"class":312},[280,976,977],{},"We can use it like this:",[296,979,981],{"className":298,"code":980,"filename":353,"language":301,"meta":302,"style":302},"\u003Cx-banner>\n  \u003Cfill:title>\n    \u003Ch2>This is the title\u003C/h2>\n  \u003C/fill:title>\n\n  \u003Cp>This is the content\u003C/p>\n\u003C/x-banner>\n",[292,982,983,992,1001,1020,1029,1033,1050],{"__ignoreMap":302},[306,984,985,987,990],{"class":308,"line":309},[306,986,313],{"class":312},[306,988,989],{"class":316},"x-banner",[306,991,320],{"class":312},[306,993,994,996,999],{"class":308,"line":323},[306,995,326],{"class":312},[306,997,998],{"class":316},"fill:title",[306,1000,320],{"class":312},[306,1002,1003,1006,1008,1011,1014,1016,1018],{"class":308,"line":335},[306,1004,1005],{"class":312},"    \u003C",[306,1007,284],{"class":316},[306,1009,1010],{"class":312},">",[306,1012,1013],{"class":369},"This is the title",[306,1015,338],{"class":312},[306,1017,284],{"class":316},[306,1019,320],{"class":312},[306,1021,1022,1025,1027],{"class":308,"line":881},[306,1023,1024],{"class":312},"  \u003C/",[306,1026,998],{"class":316},[306,1028,320],{"class":312},[306,1030,1031],{"class":308,"line":888},[306,1032,885],{"emptyLinePlaceholder":884},[306,1034,1035,1037,1039,1041,1044,1046,1048],{"class":308,"line":898},[306,1036,326],{"class":312},[306,1038,280],{"class":316},[306,1040,1010],{"class":312},[306,1042,1043],{"class":369},"This is the content",[306,1045,338],{"class":312},[306,1047,280],{"class":316},[306,1049,320],{"class":312},[306,1051,1052,1054,1056],{"class":308,"line":903},[306,1053,338],{"class":312},[306,1055,989],{"class":316},[306,1057,320],{"class":312},[280,1059,1060],{},"The result will be:",[296,1062,1064],{"className":298,"code":1063,"filename":385,"language":301,"meta":302,"style":302},"\u003Cdiv role=\"banner\">\n  \u003Ch2>This is the title\u003C/h2>\n\n  \u003Cp>This is the content\u003C/p>\n\u003C/div>\n",[292,1065,1066,1084,1100,1104,1120],{"__ignoreMap":302},[306,1067,1068,1070,1072,1074,1076,1078,1080,1082],{"class":308,"line":309},[306,1069,313],{"class":312},[306,1071,317],{"class":316},[306,1073,934],{"class":652},[306,1075,656],{"class":312},[306,1077,659],{"class":652},[306,1079,941],{"class":369},[306,1081,659],{"class":652},[306,1083,320],{"class":312},[306,1085,1086,1088,1090,1092,1094,1096,1098],{"class":308,"line":323},[306,1087,326],{"class":312},[306,1089,284],{"class":316},[306,1091,1010],{"class":312},[306,1093,1013],{"class":369},[306,1095,338],{"class":312},[306,1097,284],{"class":316},[306,1099,320],{"class":312},[306,1101,1102],{"class":308,"line":335},[306,1103,885],{"emptyLinePlaceholder":884},[306,1105,1106,1108,1110,1112,1114,1116,1118],{"class":308,"line":881},[306,1107,326],{"class":312},[306,1109,280],{"class":316},[306,1111,1010],{"class":312},[306,1113,1043],{"class":369},[306,1115,338],{"class":312},[306,1117,280],{"class":316},[306,1119,320],{"class":312},[306,1121,1122,1124,1126],{"class":308,"line":888},[306,1123,338],{"class":312},[306,1125,317],{"class":316},[306,1127,320],{"class":312},[504,1129,1131],{"id":1130},"default-content","Default content",[280,1133,1134],{},"A slot may have default content, which will be used if it hasn't been filled.",[296,1136,1138],{"className":298,"code":1137,"filename":923,"language":301,"meta":302,"style":302},"\u003Cdiv role=\"banner\">\n  \u003Ch2>\n    \u003Cslot:title>Default title\u003C/slot:title>\n  \u003C/h2>\n\n  \u003Cyield />\n\u003C/div>\n",[292,1139,1140,1158,1166,1183,1191,1195,1203],{"__ignoreMap":302},[306,1141,1142,1144,1146,1148,1150,1152,1154,1156],{"class":308,"line":309},[306,1143,313],{"class":312},[306,1145,317],{"class":316},[306,1147,934],{"class":652},[306,1149,656],{"class":312},[306,1151,659],{"class":652},[306,1153,941],{"class":369},[306,1155,659],{"class":652},[306,1157,320],{"class":312},[306,1159,1160,1162,1164],{"class":308,"line":323},[306,1161,326],{"class":312},[306,1163,284],{"class":316},[306,1165,320],{"class":312},[306,1167,1168,1170,1172,1174,1177,1179,1181],{"class":308,"line":335},[306,1169,1005],{"class":312},[306,1171,952],{"class":316},[306,1173,1010],{"class":312},[306,1175,1176],{"class":369},"Default title",[306,1178,338],{"class":312},[306,1180,952],{"class":316},[306,1182,320],{"class":312},[306,1184,1185,1187,1189],{"class":308,"line":881},[306,1186,1024],{"class":312},[306,1188,284],{"class":316},[306,1190,320],{"class":312},[306,1192,1193],{"class":308,"line":888},[306,1194,885],{"emptyLinePlaceholder":884},[306,1196,1197,1199,1201],{"class":308,"line":898},[306,1198,326],{"class":312},[306,1200,329],{"class":316},[306,1202,332],{"class":312},[306,1204,1205,1207,1209],{"class":308,"line":903},[306,1206,338],{"class":312},[306,1208,317],{"class":316},[306,1210,320],{"class":312},[504,1212,1214],{"id":1213},"prepend","Prepend",[280,1216,1217,1218,1220,1221,1224],{},"You may prepend content to a slot by using the ",[292,1219,1213],{}," attribute on the ",[292,1222,1223],{},"\u003Cfill>"," tag.",[296,1226,1228],{"className":298,"code":1227,"filename":353,"language":301,"meta":302,"style":302},"\u003Cx-banner>\n  \u003Cfill:title prepend>Hello, \u003C/fill:title>\n\n  \u003Cp>This is the content\u003C/p>\n\u003C/x-banner>\n",[292,1229,1230,1238,1258,1262,1278],{"__ignoreMap":302},[306,1231,1232,1234,1236],{"class":308,"line":309},[306,1233,313],{"class":312},[306,1235,989],{"class":316},[306,1237,320],{"class":312},[306,1239,1240,1242,1244,1247,1249,1252,1254,1256],{"class":308,"line":323},[306,1241,326],{"class":312},[306,1243,998],{"class":316},[306,1245,1246],{"class":652}," prepend",[306,1248,1010],{"class":312},[306,1250,1251],{"class":369},"Hello, ",[306,1253,338],{"class":312},[306,1255,998],{"class":316},[306,1257,320],{"class":312},[306,1259,1260],{"class":308,"line":335},[306,1261,885],{"emptyLinePlaceholder":884},[306,1263,1264,1266,1268,1270,1272,1274,1276],{"class":308,"line":881},[306,1265,326],{"class":312},[306,1267,280],{"class":316},[306,1269,1010],{"class":312},[306,1271,1043],{"class":369},[306,1273,338],{"class":312},[306,1275,280],{"class":316},[306,1277,320],{"class":312},[306,1279,1280,1282,1284],{"class":308,"line":888},[306,1281,338],{"class":312},[306,1283,989],{"class":316},[306,1285,320],{"class":312},[280,1287,1288,1289,1291],{},"With our default ",[292,1290,952],{}," example, that would result in:",[296,1293,1295],{"className":298,"code":1294,"filename":385,"language":301,"meta":302,"style":302},"\u003Cdiv role=\"banner\">\n  \u003Ch2>Hello, Default title\u003C/h2>\n\n  \u003Cp>This is the content\u003C/p>\n\u003C/div>\n",[292,1296,1297,1315,1332,1336,1352],{"__ignoreMap":302},[306,1298,1299,1301,1303,1305,1307,1309,1311,1313],{"class":308,"line":309},[306,1300,313],{"class":312},[306,1302,317],{"class":316},[306,1304,934],{"class":652},[306,1306,656],{"class":312},[306,1308,659],{"class":652},[306,1310,941],{"class":369},[306,1312,659],{"class":652},[306,1314,320],{"class":312},[306,1316,1317,1319,1321,1323,1326,1328,1330],{"class":308,"line":323},[306,1318,326],{"class":312},[306,1320,284],{"class":316},[306,1322,1010],{"class":312},[306,1324,1325],{"class":369},"Hello, Default title",[306,1327,338],{"class":312},[306,1329,284],{"class":316},[306,1331,320],{"class":312},[306,1333,1334],{"class":308,"line":335},[306,1335,885],{"emptyLinePlaceholder":884},[306,1337,1338,1340,1342,1344,1346,1348,1350],{"class":308,"line":881},[306,1339,326],{"class":312},[306,1341,280],{"class":316},[306,1343,1010],{"class":312},[306,1345,1043],{"class":369},[306,1347,338],{"class":312},[306,1349,280],{"class":316},[306,1351,320],{"class":312},[306,1353,1354,1356,1358],{"class":308,"line":888},[306,1355,338],{"class":312},[306,1357,317],{"class":316},[306,1359,320],{"class":312},[504,1361,1363],{"id":1362},"append","Append",[280,1365,1366,1367,1220,1369,1224],{},"You may also append content to a slot by using the ",[292,1368,1362],{},[292,1370,1223],{},[296,1372,1374],{"className":298,"code":1373,"filename":353,"language":301,"meta":302,"style":302},"\u003Cx-banner>\n  \u003Cfill:title append>, what a name!\u003C/fill:title>\n\n  \u003Cp>This is the content\u003C/p>\n\u003C/x-banner>\n",[292,1375,1376,1384,1404,1408,1424],{"__ignoreMap":302},[306,1377,1378,1380,1382],{"class":308,"line":309},[306,1379,313],{"class":312},[306,1381,989],{"class":316},[306,1383,320],{"class":312},[306,1385,1386,1388,1390,1393,1395,1398,1400,1402],{"class":308,"line":323},[306,1387,326],{"class":312},[306,1389,998],{"class":316},[306,1391,1392],{"class":652}," append",[306,1394,1010],{"class":312},[306,1396,1397],{"class":369},", what a name!",[306,1399,338],{"class":312},[306,1401,998],{"class":316},[306,1403,320],{"class":312},[306,1405,1406],{"class":308,"line":335},[306,1407,885],{"emptyLinePlaceholder":884},[306,1409,1410,1412,1414,1416,1418,1420,1422],{"class":308,"line":881},[306,1411,326],{"class":312},[306,1413,280],{"class":316},[306,1415,1010],{"class":312},[306,1417,1043],{"class":369},[306,1419,338],{"class":312},[306,1421,280],{"class":316},[306,1423,320],{"class":312},[306,1425,1426,1428,1430],{"class":308,"line":888},[306,1427,338],{"class":312},[306,1429,989],{"class":316},[306,1431,320],{"class":312},[280,1433,1288,1434,1291],{},[292,1435,952],{},[296,1437,1439],{"className":298,"code":1438,"filename":385,"language":301,"meta":302,"style":302},"\u003Cdiv role=\"banner\">\n  \u003Ch2>Default title, what a name!\u003C/h2>\n\n  \u003Cp>This is the content\u003C/p>\n\u003C/div>\n",[292,1440,1441,1459,1476,1480,1496],{"__ignoreMap":302},[306,1442,1443,1445,1447,1449,1451,1453,1455,1457],{"class":308,"line":309},[306,1444,313],{"class":312},[306,1446,317],{"class":316},[306,1448,934],{"class":652},[306,1450,656],{"class":312},[306,1452,659],{"class":652},[306,1454,941],{"class":369},[306,1456,659],{"class":652},[306,1458,320],{"class":312},[306,1460,1461,1463,1465,1467,1470,1472,1474],{"class":308,"line":323},[306,1462,326],{"class":312},[306,1464,284],{"class":316},[306,1466,1010],{"class":312},[306,1468,1469],{"class":369},"Default title, what a name!",[306,1471,338],{"class":312},[306,1473,284],{"class":316},[306,1475,320],{"class":312},[306,1477,1478],{"class":308,"line":335},[306,1479,885],{"emptyLinePlaceholder":884},[306,1481,1482,1484,1486,1488,1490,1492,1494],{"class":308,"line":881},[306,1483,326],{"class":312},[306,1485,280],{"class":316},[306,1487,1010],{"class":312},[306,1489,1043],{"class":369},[306,1491,338],{"class":312},[306,1493,280],{"class":316},[306,1495,320],{"class":312},[306,1497,1498,1500,1502],{"class":308,"line":888},[306,1499,338],{"class":312},[306,1501,317],{"class":316},[306,1503,320],{"class":312},[504,1505,1507],{"id":1506},"check-if-a-slot-is-filled","Check if a slot is filled",[280,1509,1510,1511,1514],{},"You may check if a slot has been filled by using the ",[292,1512,1513],{},"$slots"," variable in a Component.",[280,1516,1517,1518,1521,1522,1525],{},"For example, let's create a ",[292,1519,1520],{},"\u003Cx-footer>"," Component that will pull in another Component based on whether a ",[292,1523,1524],{},"copyright"," slot has been filled or not:",[296,1527,1530],{"className":298,"code":1528,"filename":1529,"language":301,"meta":302,"style":302},"\u003Cdiv>\n  \u003Cyield />\n\n  \u003Cif condition=\"$slots.copyright?.filled\">\n    \u003C!-- components/copyright.html -->\n    \u003Cx-copyright />\n  \u003C/if>\n\u003C/div>\n","components/footer.html",[292,1531,1532,1540,1548,1552,1573,1579,1588,1596],{"__ignoreMap":302},[306,1533,1534,1536,1538],{"class":308,"line":309},[306,1535,313],{"class":312},[306,1537,317],{"class":316},[306,1539,320],{"class":312},[306,1541,1542,1544,1546],{"class":308,"line":323},[306,1543,326],{"class":312},[306,1545,329],{"class":316},[306,1547,332],{"class":312},[306,1549,1550],{"class":308,"line":335},[306,1551,885],{"emptyLinePlaceholder":884},[306,1553,1554,1556,1559,1562,1564,1566,1569,1571],{"class":308,"line":881},[306,1555,326],{"class":312},[306,1557,1558],{"class":316},"if",[306,1560,1561],{"class":652}," condition",[306,1563,656],{"class":312},[306,1565,659],{"class":652},[306,1567,1568],{"class":369},"$slots.copyright?.filled",[306,1570,659],{"class":652},[306,1572,320],{"class":312},[306,1574,1575],{"class":308,"line":888},[306,1576,1578],{"class":1577},"smVoC","    \u003C!-- components/copyright.html -->\n",[306,1580,1581,1583,1586],{"class":308,"line":898},[306,1582,1005],{"class":312},[306,1584,1585],{"class":316},"x-copyright",[306,1587,332],{"class":312},[306,1589,1590,1592,1594],{"class":308,"line":903},[306,1591,1024],{"class":312},[306,1593,1558],{"class":316},[306,1595,320],{"class":312},[306,1597,1599,1601,1603],{"class":308,"line":1598},8,[306,1600,338],{"class":312},[306,1602,317],{"class":316},[306,1604,320],{"class":312},[504,1606,1608],{"id":1607},"discard-default-content","Discard default content",[280,1610,1611,1612,1224],{},"Sometimes you may need to discard the content of a slot that has default content. You can do this by using an empty ",[292,1613,1223],{},[280,1615,1616],{},"Consider the following component:",[296,1618,1620],{"className":298,"code":1619,"filename":923,"language":301,"meta":302,"style":302},"\u003Cdiv>\n  \u003Cslot:title>\n    \u003Ch2>\n      Default title\n    \u003C/h2>\n  \u003C/slot:title>\n\n  \u003Cyield />\n\u003C/div>\n",[292,1621,1622,1630,1638,1646,1651,1660,1668,1672,1680],{"__ignoreMap":302},[306,1623,1624,1626,1628],{"class":308,"line":309},[306,1625,313],{"class":312},[306,1627,317],{"class":316},[306,1629,320],{"class":312},[306,1631,1632,1634,1636],{"class":308,"line":323},[306,1633,326],{"class":312},[306,1635,952],{"class":316},[306,1637,320],{"class":312},[306,1639,1640,1642,1644],{"class":308,"line":335},[306,1641,1005],{"class":312},[306,1643,284],{"class":316},[306,1645,320],{"class":312},[306,1647,1648],{"class":308,"line":881},[306,1649,1650],{"class":369},"      Default title\n",[306,1652,1653,1656,1658],{"class":308,"line":888},[306,1654,1655],{"class":312},"    \u003C/",[306,1657,284],{"class":316},[306,1659,320],{"class":312},[306,1661,1662,1664,1666],{"class":308,"line":898},[306,1663,1024],{"class":312},[306,1665,952],{"class":316},[306,1667,320],{"class":312},[306,1669,1670],{"class":308,"line":903},[306,1671,885],{"emptyLinePlaceholder":884},[306,1673,1674,1676,1678],{"class":308,"line":1598},[306,1675,326],{"class":312},[306,1677,329],{"class":316},[306,1679,332],{"class":312},[306,1681,1683,1685,1687],{"class":308,"line":1682},9,[306,1684,338],{"class":312},[306,1686,317],{"class":316},[306,1688,320],{"class":312},[280,1690,1691,1692,1694],{},"If you need to use this component in a context where the title doesn't make sense, an empty ",[292,1693,1223],{}," tag will will simply set the content to nothing:",[296,1696,1699],{"className":298,"code":1697,"filename":353,"highlights":1698,"language":301,"meta":302,"style":302},"\u003Cx-banner>\n  \u003Cfill:title />\n\n  \u003Cp>This is the content\u003C/p>\n\u003C/x-banner>\n",[323],[292,1700,1701,1709,1719,1723,1739],{"__ignoreMap":302},[306,1702,1703,1705,1707],{"class":308,"line":309},[306,1704,313],{"class":312},[306,1706,989],{"class":316},[306,1708,320],{"class":312},[306,1710,1713,1715,1717],{"class":1711,"line":323},[308,1712],"highlight",[306,1714,326],{"class":312},[306,1716,998],{"class":316},[306,1718,332],{"class":312},[306,1720,1721],{"class":308,"line":335},[306,1722,885],{"emptyLinePlaceholder":884},[306,1724,1725,1727,1729,1731,1733,1735,1737],{"class":308,"line":881},[306,1726,326],{"class":312},[306,1728,280],{"class":316},[306,1730,1010],{"class":312},[306,1732,1043],{"class":369},[306,1734,338],{"class":312},[306,1736,280],{"class":316},[306,1738,320],{"class":312},[306,1740,1741,1743,1745],{"class":308,"line":888},[306,1742,338],{"class":312},[306,1744,989],{"class":316},[306,1746,320],{"class":312},[280,1748,1749,1750,1752],{},"This will effectively render an empty ",[292,1751,952],{},", resulting in:",[296,1754,1756],{"className":298,"code":1755,"filename":385,"language":301,"meta":302,"style":302},"\u003Cdiv>\n  \u003Cp>This is the content\u003C/p>\n\u003C/div>\n",[292,1757,1758,1766,1782],{"__ignoreMap":302},[306,1759,1760,1762,1764],{"class":308,"line":309},[306,1761,313],{"class":312},[306,1763,317],{"class":316},[306,1765,320],{"class":312},[306,1767,1768,1770,1772,1774,1776,1778,1780],{"class":308,"line":323},[306,1769,326],{"class":312},[306,1771,280],{"class":316},[306,1773,1010],{"class":312},[306,1775,1043],{"class":369},[306,1777,338],{"class":312},[306,1779,280],{"class":316},[306,1781,320],{"class":312},[306,1783,1784,1786,1788],{"class":308,"line":335},[306,1785,338],{"class":312},[306,1787,317],{"class":316},[306,1789,320],{"class":312},[284,1791,1793],{"id":1792},"stacks","Stacks",[280,1795,1796,1797,1800,1801,1804],{},"You may push content to named stacks that can be rendered in other Components. This concept is similar to Blade's ",[292,1798,1799],{},"stack"," and ",[292,1802,1803],{},"push"," directives, also known as teleporting in frameworks like Vue.js.",[280,1806,1807,1808,1811],{},"For example, imagine you're coding a Shopify email template and need to add some Liquid code at the very top of the HTML, before the ",[292,1809,1810],{},"doctype",".",[280,1813,1814,1815,1817],{},"You would modify your Layout to include a ",[292,1816,1799],{}," tag:",[296,1819,1822],{"className":298,"code":1820,"filename":1821,"language":301,"meta":302,"style":302},"\u003Cstack name=\"liquid-vars\" />\n\n\u003C!doctype html>\n\u003Chtml>\n\u003Chead>\n  \u003Cstyle>\n    @tailwind components;\n    @tailwind utilities;\n  \u003C/style>\n\u003C/head>\n\u003Cbody>\n  \u003Cyield />\n\u003C/body>\n","layouts/layout.html",[292,1823,1824,1844,1848,1860,1868,1877,1886,1898,1907,1915,1924,1934,1943],{"__ignoreMap":302},[306,1825,1826,1828,1830,1833,1835,1837,1840,1842],{"class":308,"line":309},[306,1827,313],{"class":312},[306,1829,1799],{"class":316},[306,1831,1832],{"class":652}," name",[306,1834,656],{"class":312},[306,1836,659],{"class":652},[306,1838,1839],{"class":369},"liquid-vars",[306,1841,659],{"class":652},[306,1843,332],{"class":312},[306,1845,1846],{"class":308,"line":323},[306,1847,885],{"emptyLinePlaceholder":884},[306,1849,1850,1853,1855,1858],{"class":308,"line":335},[306,1851,1852],{"class":312},"\u003C!",[306,1854,1810],{"class":316},[306,1856,1857],{"class":652}," html",[306,1859,320],{"class":312},[306,1861,1862,1864,1866],{"class":308,"line":881},[306,1863,313],{"class":312},[306,1865,301],{"class":316},[306,1867,320],{"class":312},[306,1869,1870,1872,1875],{"class":308,"line":888},[306,1871,313],{"class":312},[306,1873,1874],{"class":316},"head",[306,1876,320],{"class":312},[306,1878,1879,1881,1884],{"class":308,"line":898},[306,1880,326],{"class":312},[306,1882,1883],{"class":316},"style",[306,1885,320],{"class":312},[306,1887,1888,1892,1895],{"class":308,"line":903},[306,1889,1891],{"class":1890},"sO3Gh","    @tailwind",[306,1893,1894],{"class":369}," components",[306,1896,1897],{"class":1890},";\n",[306,1899,1900,1902,1905],{"class":308,"line":1598},[306,1901,1891],{"class":1890},[306,1903,1904],{"class":369}," utilities",[306,1906,1897],{"class":1890},[306,1908,1909,1911,1913],{"class":308,"line":1682},[306,1910,1024],{"class":312},[306,1912,1883],{"class":316},[306,1914,320],{"class":312},[306,1916,1918,1920,1922],{"class":308,"line":1917},10,[306,1919,338],{"class":312},[306,1921,1874],{"class":316},[306,1923,320],{"class":312},[306,1925,1927,1929,1932],{"class":308,"line":1926},11,[306,1928,313],{"class":312},[306,1930,1931],{"class":316},"body",[306,1933,320],{"class":312},[306,1935,1937,1939,1941],{"class":308,"line":1936},12,[306,1938,326],{"class":312},[306,1940,329],{"class":316},[306,1942,332],{"class":312},[306,1944,1946,1948,1950],{"class":308,"line":1945},13,[306,1947,338],{"class":312},[306,1949,1931],{"class":316},[306,1951,320],{"class":312},[693,1953,1955,1957,1958,1960,1961,1964],{"type":1954},"danger",[292,1956,1799],{},"\n and \n",[292,1959,1803],{},"\n tags require a non-empty \n",[292,1962,1963],{},"name","\n attribute.\n",[280,1966,1967],{},"You may then push content to that stack from a Template:",[296,1969,1971],{"className":298,"code":1970,"filename":353,"language":301,"meta":302,"style":302},"\u003Cpush name=\"liquid-vars\">\n  {% capture email_title %} Your shopping cart is waiting for you {% endcapture %}\n\u003C/push>\n\n\u003Cx-layout>\n  \u003C!-- your email HTML... -->\n\u003C/x-layout>\n",[292,1972,1973,1991,1996,2004,2008,2017,2022],{"__ignoreMap":302},[306,1974,1975,1977,1979,1981,1983,1985,1987,1989],{"class":308,"line":309},[306,1976,313],{"class":312},[306,1978,1803],{"class":316},[306,1980,1832],{"class":652},[306,1982,656],{"class":312},[306,1984,659],{"class":652},[306,1986,1839],{"class":369},[306,1988,659],{"class":652},[306,1990,320],{"class":312},[306,1992,1993],{"class":308,"line":323},[306,1994,1995],{"class":369},"  {% capture email_title %} Your shopping cart is waiting for you {% endcapture %}\n",[306,1997,1998,2000,2002],{"class":308,"line":335},[306,1999,338],{"class":312},[306,2001,1803],{"class":316},[306,2003,320],{"class":312},[306,2005,2006],{"class":308,"line":881},[306,2007,885],{"emptyLinePlaceholder":884},[306,2009,2010,2012,2015],{"class":308,"line":888},[306,2011,313],{"class":312},[306,2013,2014],{"class":316},"x-layout",[306,2016,320],{"class":312},[306,2018,2019],{"class":308,"line":898},[306,2020,2021],{"class":1577},"  \u003C!-- your email HTML... -->\n",[306,2023,2024,2026,2028],{"class":308,"line":903},[306,2025,338],{"class":312},[306,2027,2014],{"class":316},[306,2029,320],{"class":312},[280,2031,381],{},[296,2033,2035],{"className":298,"code":2034,"filename":385,"language":301,"meta":302,"style":302},"{% capture email_title %} Your shopping cart is waiting for you {% endcapture %}\n\n\u003C!doctype html>\n\u003C!-- etc. -->\n",[292,2036,2037,2042,2046,2056],{"__ignoreMap":302},[306,2038,2039],{"class":308,"line":309},[306,2040,2041],{"class":369},"{% capture email_title %} Your shopping cart is waiting for you {% endcapture %}\n",[306,2043,2044],{"class":308,"line":323},[306,2045,885],{"emptyLinePlaceholder":884},[306,2047,2048,2050,2052,2054],{"class":308,"line":335},[306,2049,1852],{"class":312},[306,2051,1810],{"class":316},[306,2053,1857],{"class":652},[306,2055,320],{"class":312},[306,2057,2058],{"class":308,"line":881},[306,2059,2060],{"class":1577},"\u003C!-- etc. -->\n",[504,2062,2063],{"id":2063},"once",[280,2065,2066,2067,1220,2069,2072,2073,2075],{},"You may use the ",[292,2068,2063],{},[292,2070,2071],{},"\u003Cpush>"," tag to only push content once in a rendering cycle. This is useful if you're rendering the Component in a loop and want to make sure the contents of ",[292,2074,2071],{}," is only rendered once.",[280,2077,2078],{},"For example, imagine this Card Component:",[296,2080,2083],{"className":298,"code":2081,"filename":2082,"language":301,"meta":302,"style":302},"\u003Cpush name=\"head\" once>\n  \u003Cstyle>\n    .card {\n      @apply bg-white rounded-lg shadow-md;\n    }\n  \u003C/style>\n\u003C/push>\n\n\u003Cdiv class=\"card\">\n  \u003C!-- ... -->\n\u003C/div>\n","components/card.html",[292,2084,2085,2106,2114,2123,2143,2148,2156,2164,2168,2188,2193],{"__ignoreMap":302},[306,2086,2087,2089,2091,2093,2095,2097,2099,2101,2104],{"class":308,"line":309},[306,2088,313],{"class":312},[306,2090,1803],{"class":316},[306,2092,1832],{"class":652},[306,2094,656],{"class":312},[306,2096,659],{"class":652},[306,2098,1874],{"class":369},[306,2100,659],{"class":652},[306,2102,2103],{"class":652}," once",[306,2105,320],{"class":312},[306,2107,2108,2110,2112],{"class":308,"line":323},[306,2109,326],{"class":312},[306,2111,1883],{"class":316},[306,2113,320],{"class":312},[306,2115,2116,2119],{"class":308,"line":335},[306,2117,2118],{"class":316},"    .card",[306,2120,2122],{"class":2121},"shy1k"," {\n",[306,2124,2125,2128,2132,2135,2138,2141],{"class":308,"line":881},[306,2126,2127],{"class":1890},"      @",[306,2129,2131],{"class":2130},"sO1gY","apply",[306,2133,2134],{"class":2130}," bg-white",[306,2136,2137],{"class":2130}," rounded-lg",[306,2139,2140],{"class":2130}," shadow-md",[306,2142,1897],{"class":1890},[306,2144,2145],{"class":308,"line":888},[306,2146,2147],{"class":2121},"    }\n",[306,2149,2150,2152,2154],{"class":308,"line":898},[306,2151,1024],{"class":312},[306,2153,1883],{"class":316},[306,2155,320],{"class":312},[306,2157,2158,2160,2162],{"class":308,"line":903},[306,2159,338],{"class":312},[306,2161,1803],{"class":316},[306,2163,320],{"class":312},[306,2165,2166],{"class":308,"line":1598},[306,2167,885],{"emptyLinePlaceholder":884},[306,2169,2170,2172,2174,2177,2179,2181,2184,2186],{"class":308,"line":1682},[306,2171,313],{"class":312},[306,2173,317],{"class":316},[306,2175,2176],{"class":652}," class",[306,2178,656],{"class":312},[306,2180,659],{"class":652},[306,2182,2183],{"class":369},"card",[306,2185,659],{"class":652},[306,2187,320],{"class":312},[306,2189,2190],{"class":308,"line":1917},[306,2191,2192],{"class":1577},"  \u003C!-- ... -->\n",[306,2194,2195,2197,2199],{"class":308,"line":1926},[306,2196,338],{"class":312},[306,2198,317],{"class":316},[306,2200,320],{"class":312},[280,2202,2203,2204,2206],{},"Looping over this Component will only push that CSS once to the ",[292,2205,1874],{}," stack:",[296,2208,2210],{"className":298,"code":2209,"filename":353,"language":301,"meta":302,"style":302},"\u003Cx-layout>\n  \u003Ceach loop=\"item in [1,2,3]\">\n    \u003Cx-card />\n  \u003C/each>\n\u003C/x-layout>\n",[292,2211,2212,2220,2241,2250,2258],{"__ignoreMap":302},[306,2213,2214,2216,2218],{"class":308,"line":309},[306,2215,313],{"class":312},[306,2217,2014],{"class":316},[306,2219,320],{"class":312},[306,2221,2222,2224,2227,2230,2232,2234,2237,2239],{"class":308,"line":323},[306,2223,326],{"class":312},[306,2225,2226],{"class":316},"each",[306,2228,2229],{"class":652}," loop",[306,2231,656],{"class":312},[306,2233,659],{"class":652},[306,2235,2236],{"class":369},"item in [1,2,3]",[306,2238,659],{"class":652},[306,2240,320],{"class":312},[306,2242,2243,2245,2248],{"class":308,"line":335},[306,2244,1005],{"class":312},[306,2246,2247],{"class":316},"x-card",[306,2249,332],{"class":312},[306,2251,2252,2254,2256],{"class":308,"line":881},[306,2253,1024],{"class":312},[306,2255,2226],{"class":316},[306,2257,320],{"class":312},[306,2259,2260,2262,2264],{"class":308,"line":888},[306,2261,338],{"class":312},[306,2263,2014],{"class":316},[306,2265,320],{"class":312},[284,2267,2269],{"id":2268},"props","Props",[280,2271,2272],{},"Props are attributes that can be added to a Component's tag. They can be used to pass data to the Component, or to configure its behavior.",[280,2274,2275,2276,2279,2280,2282],{},"To use props in a Component, you need to define them first. This is done by adding a ",[292,2277,2278],{},"\u003Cscript>"," tag with the ",[292,2281,2268],{}," attribute:",[296,2284,2288],{"className":2285,"code":2286,"filename":300,"language":2287,"meta":302,"style":302},"language-hbs shiki shiki-themes tailwind-css tailwind-css","\u003Cscript props>\n  module.exports = {\n    title: props.title || 'Default title'\n  }\n\u003C/script>\n\n\u003Cdiv>\n  {{ title }}\n\u003C/div>\n","hbs",[292,2289,2290,2302,2318,2344,2349,2357,2361,2369,2379],{"__ignoreMap":302},[306,2291,2292,2294,2297,2300],{"class":308,"line":309},[306,2293,313],{"class":312},[306,2295,2296],{"class":316},"script",[306,2298,2299],{"class":369}," props",[306,2301,320],{"class":312},[306,2303,2304,2307,2309,2312,2316],{"class":308,"line":323},[306,2305,2306],{"class":316},"  module",[306,2308,1811],{"class":312},[306,2310,2311],{"class":316},"exports",[306,2313,2315],{"class":2314},"sVevU"," =",[306,2317,2122],{"class":312},[306,2319,2320,2323,2325,2328,2330,2333,2336,2339,2341],{"class":308,"line":335},[306,2321,2322],{"class":369},"    title",[306,2324,294],{"class":312},[306,2326,2299],{"class":2327},"s8qYB",[306,2329,1811],{"class":312},[306,2331,2332],{"class":2327},"title",[306,2334,2335],{"class":312}," ||",[306,2337,2338],{"class":652}," '",[306,2340,1176],{"class":369},[306,2342,2343],{"class":652},"'\n",[306,2345,2346],{"class":308,"line":881},[306,2347,2348],{"class":312},"  }\n",[306,2350,2351,2353,2355],{"class":308,"line":888},[306,2352,338],{"class":312},[306,2354,2296],{"class":316},[306,2356,320],{"class":312},[306,2358,2359],{"class":308,"line":898},[306,2360,885],{"emptyLinePlaceholder":884},[306,2362,2363,2365,2367],{"class":308,"line":903},[306,2364,313],{"class":312},[306,2366,317],{"class":316},[306,2368,320],{"class":312},[306,2370,2371,2374,2376],{"class":308,"line":1598},[306,2372,2373],{"class":369},"  {{ ",[306,2375,2332],{"class":2327},[306,2377,2378],{"class":369}," }}\n",[306,2380,2381,2383,2385],{"class":308,"line":1682},[306,2382,338],{"class":312},[306,2384,317],{"class":316},[306,2386,320],{"class":312},[693,2388,2389,2390,2393],{"type":695},"\nOnly CommonJS syntax with \n",[292,2391,2392],{},"module.exports","\n is currently supported in Components.\n",[280,2395,2396,2397,2399,2400,2402,2403,2405,2406,2409],{},"Props that you pass to the Component will be available in the ",[292,2398,2278],{}," tag as the ",[292,2401,2268],{}," object. In this example we're getting the ",[292,2404,2332],{}," prop from ",[292,2407,2408],{},"props.title",", falling back to a default value if it's not provided.",[280,2411,2412,2413,2415],{},"The script uses ",[292,2414,2392],{}," to export an object with props as keys. You can use these keys inside the Component through the curly braces syntax, as shown above.",[280,2417,2418,2419,2421,2422,2282],{},"To pass the ",[292,2420,2332],{}," prop to the Component, you would use the ",[292,2423,2332],{},[296,2425,2427],{"className":298,"code":2426,"filename":353,"language":301,"meta":302,"style":302},"\u003Cx-alert title=\"Hello, world!\" />\n",[292,2428,2429],{"__ignoreMap":302},[306,2430,2431,2433,2435,2438,2440,2442,2445,2447],{"class":308,"line":309},[306,2432,313],{"class":312},[306,2434,362],{"class":316},[306,2436,2437],{"class":652}," title",[306,2439,656],{"class":312},[306,2441,659],{"class":652},[306,2443,2444],{"class":369},"Hello, world!",[306,2446,659],{"class":652},[306,2448,332],{"class":312},[504,2450,2452],{"id":2451},"reserved-props","Reserved props",[280,2454,345,2455,2457],{},[292,2456,690],{}," prop is reserved when used on Components - it will always try to load a Component file at the path defined in the attribute value.",[280,2459,2460,2461,2463],{},"So if you're trying to pass a ",[292,2462,690],{}," prop to a Component, you should use a different name:",[296,2465,2468],{"className":2285,"code":2466,"filename":300,"highlights":2467,"language":2287,"meta":302,"style":302},"\u003Cscript props>\n  module.exports = {\n    imgSrc: props['img-src'] || 'example.jpg',\n  }\n\u003C/script>\n\n\u003Cimg src=\"{{ imgSrc }}\">\n",[335],[292,2469,2470,2480,2492,2529,2533,2541,2545],{"__ignoreMap":302},[306,2471,2472,2474,2476,2478],{"class":308,"line":309},[306,2473,313],{"class":312},[306,2475,2296],{"class":316},[306,2477,2299],{"class":369},[306,2479,320],{"class":312},[306,2481,2482,2484,2486,2488,2490],{"class":308,"line":323},[306,2483,2306],{"class":316},[306,2485,1811],{"class":312},[306,2487,2311],{"class":316},[306,2489,2315],{"class":2314},[306,2491,2122],{"class":312},[306,2493,2495,2498,2500,2502,2505,2508,2511,2513,2516,2519,2521,2524,2526],{"class":2494,"line":335},[308,1712],[306,2496,2497],{"class":369},"    imgSrc",[306,2499,294],{"class":312},[306,2501,2299],{"class":2327},[306,2503,2504],{"class":369},"[",[306,2506,2507],{"class":652},"'",[306,2509,2510],{"class":369},"img-src",[306,2512,2507],{"class":652},[306,2514,2515],{"class":369},"] ",[306,2517,2518],{"class":312},"||",[306,2520,2338],{"class":652},[306,2522,2523],{"class":369},"example.jpg",[306,2525,2507],{"class":652},[306,2527,2528],{"class":312},",\n",[306,2530,2531],{"class":308,"line":881},[306,2532,2348],{"class":312},[306,2534,2535,2537,2539],{"class":308,"line":888},[306,2536,338],{"class":312},[306,2538,2296],{"class":316},[306,2540,320],{"class":312},[306,2542,2543],{"class":308,"line":898},[306,2544,885],{"emptyLinePlaceholder":884},[306,2546,2547,2549,2552,2554,2556,2558,2561,2564,2567,2569],{"class":308,"line":903},[306,2548,313],{"class":312},[306,2550,2551],{"class":316},"img",[306,2553,653],{"class":652},[306,2555,656],{"class":312},[306,2557,659],{"class":652},[306,2559,2560],{"class":369},"{{ ",[306,2562,2563],{"class":2327},"imgSrc",[306,2565,2566],{"class":369}," }}",[306,2568,659],{"class":652},[306,2570,320],{"class":312},[296,2572,2577],{"className":2573,"code":2574,"filename":353,"highlights":2575,"language":301,"meta":2576,"style":302},"language-html shiki shiki-themes tailwind-css tailwind-css has-diff","  \u003Cx-alert src=\"image.jpg\" /> // [!code --]\n  \u003Cx-alert img-src=\"image.jpg\" /> // [!code ++]\n",[323],"diff",[292,2578,2579,2600],{"__ignoreMap":302},[306,2580,2583,2585,2587,2589,2591,2593,2596,2598],{"class":2581,"line":309},[308,2576,2582],"remove",[306,2584,326],{"class":312},[306,2586,362],{"class":316},[306,2588,653],{"class":652},[306,2590,656],{"class":312},[306,2592,659],{"class":652},[306,2594,2595],{"class":369},"image.jpg",[306,2597,659],{"class":652},[306,2599,549],{"class":312},[306,2601,2604,2606,2608,2611,2613,2615,2617,2619],{"class":2602,"line":323},[308,1712,2576,2603],"add",[306,2605,326],{"class":312},[306,2607,362],{"class":316},[306,2609,2610],{"class":652}," img-src",[306,2612,656],{"class":312},[306,2614,659],{"class":652},[306,2616,2595],{"class":369},[306,2618,659],{"class":652},[306,2620,549],{"class":312},[280,2622,2623,2624,294],{},"Alternatively, you may change the prop attribute name to something other than ",[292,2625,690],{},[296,2627,2632],{"className":2628,"code":2629,"filename":2630,"language":2631,"meta":302,"style":302},"language-js shiki shiki-themes tailwind-css tailwind-css","export default {\n  components: {\n    attribute: 'href',\n  },\n}\n","config.js","js",[292,2633,2634,2645,2654,2666,2671],{"__ignoreMap":302},[306,2635,2636,2639,2642],{"class":308,"line":309},[306,2637,2638],{"class":316},"export",[306,2640,2641],{"class":316}," default",[306,2643,2122],{"class":2644},"sprQ5",[306,2646,2647,2650,2652],{"class":308,"line":323},[306,2648,2649],{"class":369},"  components",[306,2651,294],{"class":2644},[306,2653,2122],{"class":2644},[306,2655,2656,2659,2661,2664],{"class":308,"line":335},[306,2657,2658],{"class":369},"    attribute",[306,2660,294],{"class":2644},[306,2662,2663],{"class":369}," 'href'",[306,2665,2528],{"class":2644},[306,2667,2668],{"class":308,"line":881},[306,2669,2670],{"class":2644},"  },\n",[306,2672,2673],{"class":308,"line":888},[306,2674,2675],{"class":2644},"}\n",[504,2677,2679],{"id":2678},"encoding-props-data","Encoding props data",[280,2681,2682],{},"When passing a props object to a Component, you need to encode the values.",[280,2684,2685],{},"For example, these won't work:",[296,2687,2689],{"className":298,"code":2688,"language":301,"meta":302,"style":302},"\u003Cx-alert props='{ \"title\": \"Component's Title\" }' />\n",[292,2690,2691],{"__ignoreMap":302},[306,2692,2693,2695,2697,2699,2701,2703,2706,2708,2711],{"class":308,"line":309},[306,2694,313],{"class":312},[306,2696,362],{"class":316},[306,2698,2299],{"class":652},[306,2700,656],{"class":312},[306,2702,2507],{"class":652},[306,2704,2705],{"class":369},"{ \"title\": \"Component",[306,2707,2507],{"class":652},[306,2709,2710],{"class":652},"s Title\" }' ",[306,2712,2713],{"class":312},"/>\n",[296,2715,2717],{"className":298,"code":2716,"language":301,"meta":302,"style":302},"\u003Cx-alert props='{ \"title\": \"Component\\'s Title\" }' />\n",[292,2718,2719],{"__ignoreMap":302},[306,2720,2721,2723,2725,2727,2729,2731,2734,2736,2738],{"class":308,"line":309},[306,2722,313],{"class":312},[306,2724,362],{"class":316},[306,2726,2299],{"class":652},[306,2728,656],{"class":312},[306,2730,2507],{"class":652},[306,2732,2733],{"class":369},"{ \"title\": \"Component\\",[306,2735,2507],{"class":652},[306,2737,2710],{"class":652},[306,2739,2713],{"class":312},[280,2741,2742],{},"But this will:",[296,2744,2746],{"className":298,"code":2745,"language":301,"meta":302,"style":302},"\u003Cx-alert props='{ \"title\": \"Component's Title\" }' />\n",[292,2747,2748],{"__ignoreMap":302},[306,2749,2750,2752,2754,2756,2758,2760,2762,2765,2768,2770],{"class":308,"line":309},[306,2751,313],{"class":312},[306,2753,362],{"class":316},[306,2755,2299],{"class":652},[306,2757,656],{"class":312},[306,2759,2507],{"class":652},[306,2761,2705],{"class":369},[306,2763,2764],{"class":316},"'",[306,2766,2767],{"class":369},"s Title\" }",[306,2769,2507],{"class":652},[306,2771,332],{"class":312},[504,2773,2775],{"id":2774},"aware-props","Aware props",[280,2777,2778,2779,2782],{},"By default, props are scoped to the Component and are not available to nested Components. If you need to change this, you may use the ",[292,2780,2781],{},"aware:"," prefix when passing props to a Component:",[280,2784,2785],{},"Consider the following two Components:",[296,2787,2790],{"className":2285,"code":2788,"filename":2789,"language":2287,"meta":302,"style":302},"\u003Cscript props>\n  module.exports = {\n    title: props.title || 'Default child title'\n  }\n\u003C/script>\n\n\u003Cdiv>\n  Title in child: {{ title }}\n\u003C/div>\n","components/child.html",[292,2791,2792,2802,2814,2835,2839,2847,2851,2859,2868],{"__ignoreMap":302},[306,2793,2794,2796,2798,2800],{"class":308,"line":309},[306,2795,313],{"class":312},[306,2797,2296],{"class":316},[306,2799,2299],{"class":369},[306,2801,320],{"class":312},[306,2803,2804,2806,2808,2810,2812],{"class":308,"line":323},[306,2805,2306],{"class":316},[306,2807,1811],{"class":312},[306,2809,2311],{"class":316},[306,2811,2315],{"class":2314},[306,2813,2122],{"class":312},[306,2815,2816,2818,2820,2822,2824,2826,2828,2830,2833],{"class":308,"line":335},[306,2817,2322],{"class":369},[306,2819,294],{"class":312},[306,2821,2299],{"class":2327},[306,2823,1811],{"class":312},[306,2825,2332],{"class":2327},[306,2827,2335],{"class":312},[306,2829,2338],{"class":652},[306,2831,2832],{"class":369},"Default child title",[306,2834,2343],{"class":652},[306,2836,2837],{"class":308,"line":881},[306,2838,2348],{"class":312},[306,2840,2841,2843,2845],{"class":308,"line":888},[306,2842,338],{"class":312},[306,2844,2296],{"class":316},[306,2846,320],{"class":312},[306,2848,2849],{"class":308,"line":898},[306,2850,885],{"emptyLinePlaceholder":884},[306,2852,2853,2855,2857],{"class":308,"line":903},[306,2854,313],{"class":312},[306,2856,317],{"class":316},[306,2858,320],{"class":312},[306,2860,2861,2864,2866],{"class":308,"line":1598},[306,2862,2863],{"class":369},"  Title in child: {{ ",[306,2865,2332],{"class":2327},[306,2867,2378],{"class":369},[306,2869,2870,2872,2874],{"class":308,"line":1682},[306,2871,338],{"class":312},[306,2873,317],{"class":316},[306,2875,320],{"class":312},[296,2877,2880],{"className":2285,"code":2878,"filename":2879,"language":2287,"meta":302,"style":302},"\u003Cscript props>\n  module.exports = {\n    title: props.title || 'Default parent title'\n  }\n\u003C/script>\n\n\u003Cdiv>\n  Title in parent: {{ title }}\n  \u003Cx-child />\n\u003C/div>\n","components/parent.html",[292,2881,2882,2892,2904,2925,2929,2937,2941,2949,2958,2970],{"__ignoreMap":302},[306,2883,2884,2886,2888,2890],{"class":308,"line":309},[306,2885,313],{"class":312},[306,2887,2296],{"class":316},[306,2889,2299],{"class":369},[306,2891,320],{"class":312},[306,2893,2894,2896,2898,2900,2902],{"class":308,"line":323},[306,2895,2306],{"class":316},[306,2897,1811],{"class":312},[306,2899,2311],{"class":316},[306,2901,2315],{"class":2314},[306,2903,2122],{"class":312},[306,2905,2906,2908,2910,2912,2914,2916,2918,2920,2923],{"class":308,"line":335},[306,2907,2322],{"class":369},[306,2909,294],{"class":312},[306,2911,2299],{"class":2327},[306,2913,1811],{"class":312},[306,2915,2332],{"class":2327},[306,2917,2335],{"class":312},[306,2919,2338],{"class":652},[306,2921,2922],{"class":369},"Default parent title",[306,2924,2343],{"class":652},[306,2926,2927],{"class":308,"line":881},[306,2928,2348],{"class":312},[306,2930,2931,2933,2935],{"class":308,"line":888},[306,2932,338],{"class":312},[306,2934,2296],{"class":316},[306,2936,320],{"class":312},[306,2938,2939],{"class":308,"line":898},[306,2940,885],{"emptyLinePlaceholder":884},[306,2942,2943,2945,2947],{"class":308,"line":903},[306,2944,313],{"class":312},[306,2946,317],{"class":316},[306,2948,320],{"class":312},[306,2950,2951,2954,2956],{"class":308,"line":1598},[306,2952,2953],{"class":369},"  Title in parent: {{ ",[306,2955,2332],{"class":2327},[306,2957,2378],{"class":369},[306,2959,2960,2962,2965,2968],{"class":308,"line":1682},[306,2961,326],{"class":312},[306,2963,2964],{"class":316},"x-child",[306,2966,2967],{"class":652}," /",[306,2969,320],{"class":312},[306,2971,2972,2974,2976],{"class":308,"line":1917},[306,2973,338],{"class":312},[306,2975,317],{"class":316},[306,2977,320],{"class":312},[280,2979,2980,2981,2983,2984,852],{},"If you pass the ",[292,2982,2332],{}," to the ",[292,2985,2986],{},"x-parent",[296,2988,2990],{"className":298,"code":2989,"filename":353,"language":301,"meta":302,"style":302},"\u003Cx-parent title=\"Hello, world!\" />\n",[292,2991,2992],{"__ignoreMap":302},[306,2993,2994,2996,2998,3000,3002,3004,3006,3008],{"class":308,"line":309},[306,2995,313],{"class":312},[306,2997,2986],{"class":316},[306,2999,2437],{"class":652},[306,3001,656],{"class":312},[306,3003,659],{"class":652},[306,3005,2444],{"class":369},[306,3007,659],{"class":652},[306,3009,332],{"class":312},[280,3011,3012],{},"... the result will be:",[296,3014,3016],{"className":298,"code":3015,"filename":385,"language":301,"meta":302,"style":302},"\u003Cdiv>\n  Title in parent: Hello, world!\n  \u003Cdiv>\n    Title in child: Default child title\n  \u003C/div>\n\u003C/div>\n",[292,3017,3018,3026,3031,3039,3044,3052],{"__ignoreMap":302},[306,3019,3020,3022,3024],{"class":308,"line":309},[306,3021,313],{"class":312},[306,3023,317],{"class":316},[306,3025,320],{"class":312},[306,3027,3028],{"class":308,"line":323},[306,3029,3030],{"class":369},"  Title in parent: Hello, world!\n",[306,3032,3033,3035,3037],{"class":308,"line":335},[306,3034,326],{"class":312},[306,3036,317],{"class":316},[306,3038,320],{"class":312},[306,3040,3041],{"class":308,"line":881},[306,3042,3043],{"class":369},"    Title in child: Default child title\n",[306,3045,3046,3048,3050],{"class":308,"line":888},[306,3047,1024],{"class":312},[306,3049,317],{"class":316},[306,3051,320],{"class":312},[306,3053,3054,3056,3058],{"class":308,"line":898},[306,3055,338],{"class":312},[306,3057,317],{"class":316},[306,3059,320],{"class":312},[280,3061,3062,3063,3065,3066,3068],{},"As you can see, the ",[292,3064,2332],{}," prop was not passed down to the ",[292,3067,2964],{}," Component, and it used the default value instead.",[280,3070,3071,3072,3074],{},"To make sure a prop is passed down to all nested Components, use the ",[292,3073,2781],{}," prefix:",[296,3076,3078],{"className":298,"code":3077,"filename":353,"language":301,"meta":302,"style":302},"\u003Cx-parent aware:title=\"Hello, world!\" />\n",[292,3079,3080],{"__ignoreMap":302},[306,3081,3082,3084,3086,3089,3091,3093,3095,3097],{"class":308,"line":309},[306,3083,313],{"class":312},[306,3085,2986],{"class":316},[306,3087,3088],{"class":652}," aware:title",[306,3090,656],{"class":312},[306,3092,659],{"class":652},[306,3094,2444],{"class":369},[306,3096,659],{"class":652},[306,3098,332],{"class":312},[280,3100,3101],{},"Now you'll see the result that you'd expect:",[296,3103,3105],{"className":298,"code":3104,"filename":385,"language":301,"meta":302,"style":302},"\u003Cdiv>\n  Title in parent: Hello, world!\n  \u003Cdiv>\n    Title in child: Hello, world!\n  \u003C/div>\n\u003C/div>\n",[292,3106,3107,3115,3119,3127,3132,3140],{"__ignoreMap":302},[306,3108,3109,3111,3113],{"class":308,"line":309},[306,3110,313],{"class":312},[306,3112,317],{"class":316},[306,3114,320],{"class":312},[306,3116,3117],{"class":308,"line":323},[306,3118,3030],{"class":369},[306,3120,3121,3123,3125],{"class":308,"line":335},[306,3122,326],{"class":312},[306,3124,317],{"class":316},[306,3126,320],{"class":312},[306,3128,3129],{"class":308,"line":881},[306,3130,3131],{"class":369},"    Title in child: Hello, world!\n",[306,3133,3134,3136,3138],{"class":308,"line":888},[306,3135,1024],{"class":312},[306,3137,317],{"class":316},[306,3139,320],{"class":312},[306,3141,3142,3144,3146],{"class":308,"line":898},[306,3143,338],{"class":312},[306,3145,317],{"class":316},[306,3147,320],{"class":312},[284,3149,3151],{"id":3150},"attributes","Attributes",[280,3153,3154],{},"You may pass HTML attributes to a Component and they will be added to the root element of the Component.",[280,3156,3157,3158,2282],{},"If you want to change the element to which the attributes are added, you can use the ",[292,3159,3150],{},[296,3161,3164],{"className":298,"code":3162,"filename":3163,"language":301,"meta":302,"style":302},"\u003Ctable>\n  \u003Ctr>\n    \u003Ctd attributes>\n      \u003Cyield />\n    \u003C/td>\n  \u003C/tr>\n\u003C/table>\n","components/example.html",[292,3165,3166,3174,3182,3193,3202,3210,3218],{"__ignoreMap":302},[306,3167,3168,3170,3172],{"class":308,"line":309},[306,3169,313],{"class":312},[306,3171,565],{"class":316},[306,3173,320],{"class":312},[306,3175,3176,3178,3180],{"class":308,"line":323},[306,3177,326],{"class":312},[306,3179,571],{"class":316},[306,3181,320],{"class":312},[306,3183,3184,3186,3188,3191],{"class":308,"line":335},[306,3185,1005],{"class":312},[306,3187,586],{"class":316},[306,3189,3190],{"class":652}," attributes",[306,3192,320],{"class":312},[306,3194,3195,3198,3200],{"class":308,"line":881},[306,3196,3197],{"class":312},"      \u003C",[306,3199,329],{"class":316},[306,3201,332],{"class":312},[306,3203,3204,3206,3208],{"class":308,"line":888},[306,3205,1655],{"class":312},[306,3207,586],{"class":316},[306,3209,320],{"class":312},[306,3211,3212,3214,3216],{"class":308,"line":898},[306,3213,1024],{"class":312},[306,3215,571],{"class":316},[306,3217,320],{"class":312},[306,3219,3220,3222,3224],{"class":308,"line":903},[306,3221,338],{"class":312},[306,3223,565],{"class":316},[306,3225,320],{"class":312},[504,3227,3229],{"id":3228},"expressions-in-attributes","Expressions in attributes",[280,3231,3232,3234],{},[623,3233,62],{"href":82}," may be used in a Component's attribute:",[296,3236,3238],{"className":2285,"code":3237,"filename":353,"language":2287,"meta":302,"style":302},"---\ntitle: \"Hello, world!\"\n---\n\n\u003Cx-alert title=\"{{ page.title }}\" />\n",[292,3239,3240,3245,3259,3263,3267],{"__ignoreMap":302},[306,3241,3242],{"class":308,"line":309},[306,3243,3244],{"class":369},"---\n",[306,3246,3247,3249,3251,3254,3256],{"class":308,"line":323},[306,3248,2332],{"class":316},[306,3250,294],{"class":312},[306,3252,3253],{"class":652}," \"",[306,3255,2444],{"class":369},[306,3257,3258],{"class":652},"\"\n",[306,3260,3261],{"class":308,"line":335},[306,3262,3244],{"class":369},[306,3264,3265],{"class":308,"line":881},[306,3266,885],{"emptyLinePlaceholder":884},[306,3268,3269,3271,3273,3275,3277,3279,3281,3284,3286,3288,3290],{"class":308,"line":888},[306,3270,313],{"class":312},[306,3272,362],{"class":316},[306,3274,2437],{"class":652},[306,3276,656],{"class":312},[306,3278,659],{"class":652},[306,3280,2560],{"class":369},[306,3282,3283],{"class":2327},"page.title",[306,3285,2566],{"class":369},[306,3287,659],{"class":652},[306,3289,2967],{"class":652},[306,3291,320],{"class":312},[504,3293,3295],{"id":3294},"attribute-removal","Attribute removal",[280,3297,3298],{},"The following attributes will be removed from the target element:",[490,3300,3301,3311],{},[493,3302,3303,3304,3310],{},"unknown HTML attributes (see ",[623,3305,3309],{"href":3306,"rel":3307},"https://github.com/thewebartisan7/posthtml-components/blob/main/src/valid-attributes.js",[3308],"nofollow","valid-attributes.js",")",[493,3312,3313],{},"attributes that are defined as props in the Component",[504,3315,3317],{"id":3316},"attribute-merging","Attribute merging",[280,3319,3320,1800,3323,3325],{},[292,3321,3322],{},"class",[292,3324,1883],{}," attribute values will be merged with existing ones from the target element. All other attributes will be overwritten.",[504,3327,3329],{"id":3328},"safelist-attributes","Safelist attributes",[280,3331,3332,3333,1811],{},"If you need to safelist or even block certain HTML attributes that you pass to a Component, see the ",[623,3334,3336],{"href":3335},"/docs/configuration/components#elementattributes","Component configuration docs",[284,3338,3340],{"id":3339},"variables","Variables",[280,3342,3343,3344,3347],{},"When creating a Component, you have access to global ",[292,3345,3346],{},"page"," variables:",[296,3349,3351],{"className":2285,"code":3350,"filename":3163,"language":2287,"meta":302,"style":302},"\u003Cdiv>\n  Building for: {{ page.env }}\n\u003C/div>\n",[292,3352,3353,3361,3371],{"__ignoreMap":302},[306,3354,3355,3357,3359],{"class":308,"line":309},[306,3356,313],{"class":312},[306,3358,317],{"class":316},[306,3360,320],{"class":312},[306,3362,3363,3366,3369],{"class":308,"line":323},[306,3364,3365],{"class":369},"  Building for: {{ ",[306,3367,3368],{"class":2327},"page.env",[306,3370,2378],{"class":369},[306,3372,3373,3375,3377],{"class":308,"line":335},[306,3374,338],{"class":312},[306,3376,317],{"class":316},[306,3378,320],{"class":312},[280,3380,3381,3382,3385],{},"Using this ",[292,3383,3384],{},"\u003Cx-example />"," Component in a Template will render:",[296,3387,3389],{"className":298,"code":3388,"filename":385,"language":301,"meta":302,"style":302},"\u003Cdiv>\n  Building for: production\n\u003C/div>\n",[292,3390,3391,3399,3404],{"__ignoreMap":302},[306,3392,3393,3395,3397],{"class":308,"line":309},[306,3394,313],{"class":312},[306,3396,317],{"class":316},[306,3398,320],{"class":312},[306,3400,3401],{"class":308,"line":323},[306,3402,3403],{"class":369},"  Building for: production\n",[306,3405,3406,3408,3410],{"class":308,"line":335},[306,3407,338],{"class":312},[306,3409,317],{"class":316},[306,3411,320],{"class":312},[1883,3413,3414],{},"html pre.shiki code .soJEP, html code.shiki .soJEP{--shiki-light:#CBD5E1;--shiki-dark:#CBD5E1}html pre.shiki code .sizJ4, html code.shiki .sizJ4{--shiki-light:#EC4899;--shiki-dark:#EC4899}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfCc6, html code.shiki .sfCc6{--shiki-light:#1D4ED8;--shiki-dark:#1D4ED8}html pre.shiki code .sQMLp, html code.shiki .sQMLp{--shiki-light:#0EA5E9;--shiki-dark:#0EA5E9}html pre.shiki code .smVoC, html code.shiki .smVoC{--shiki-light:#94A3B8;--shiki-light-font-style:italic;--shiki-dark:#94A3B8;--shiki-dark-font-style:italic}html pre.shiki code .sO3Gh, html code.shiki .sO3Gh{--shiki-light:#6366F1;--shiki-dark:#6366F1}html pre.shiki code .shy1k, html code.shiki .shy1k{--shiki-light:#94A3B8;--shiki-dark:#94A3B8}html pre.shiki code .sO1gY, html code.shiki .sO1gY{--shiki-light:#2563EB;--shiki-dark:#2563EB}html pre.shiki code .sVevU, html code.shiki .sVevU{--shiki-light:#35393E;--shiki-dark:#35393E}html pre.shiki code .s8qYB, html code.shiki .s8qYB{--shiki-light:#3730A3;--shiki-dark:#3730A3}html pre.shiki code .sprQ5, html code.shiki .sprQ5{--shiki-light:#44403C;--shiki-dark:#44403C}",{"title":302,"searchDepth":323,"depth":323,"links":3416},[3417,3418,3419,3423,3426,3433,3436,3441,3447],{"id":286,"depth":323,"text":287},{"id":410,"depth":323,"text":411},{"id":485,"depth":323,"text":84,"children":3420},[3421,3422],{"id":506,"depth":335,"text":506},{"id":630,"depth":335,"text":631},{"id":707,"depth":323,"text":708,"children":3424},[3425],{"id":798,"depth":335,"text":799},{"id":912,"depth":323,"text":913,"children":3427},[3428,3429,3430,3431,3432],{"id":1130,"depth":335,"text":1131},{"id":1213,"depth":335,"text":1214},{"id":1362,"depth":335,"text":1363},{"id":1506,"depth":335,"text":1507},{"id":1607,"depth":335,"text":1608},{"id":1792,"depth":323,"text":1793,"children":3434},[3435],{"id":2063,"depth":335,"text":2063},{"id":2268,"depth":323,"text":2269,"children":3437},[3438,3439,3440],{"id":2451,"depth":335,"text":2452},{"id":2678,"depth":335,"text":2679},{"id":2774,"depth":335,"text":2775},{"id":3150,"depth":323,"text":3151,"children":3442},[3443,3444,3445,3446],{"id":3228,"depth":335,"text":3229},{"id":3294,"depth":335,"text":3295},{"id":3316,"depth":335,"text":3317},{"id":3328,"depth":335,"text":3329},{"id":3339,"depth":323,"text":3340},"Use components into your HTML email templates and render them with custom slot content and data.","md",{},{"title":59,"description":3448},{"loc":80},"docs/components","f3h7lDvSOnTZC7TxvC5iT41aYIpSS6vhEaqSrm2aQHc",{"id":4,"extension":5,"items":3456,"meta":3527,"stem":195,"__hash__":196},[3457,3467,3472,3481,3494,3512,3518],{"name":8,"items":3458},[3459,3460,3461,3462,3463,3464,3465,3466],{"title":11,"path":12},{"title":14,"path":15},{"title":17,"path":18},{"title":20,"path":21},{"title":23,"path":24},{"title":26,"path":27},{"title":29,"path":30},{"title":32,"path":33},{"name":35,"items":3468},[3469,3470,3471],{"title":38,"path":39},{"title":41,"path":42},{"title":44,"path":45},{"name":47,"items":3473},[3474,3475,3476,3477,3478,3479,3480],{"title":50,"path":51},{"title":53,"path":54},{"title":56,"path":57},{"title":59,"path":60},{"title":62,"path":63},{"title":65,"path":66},{"title":68,"path":69},{"name":71,"items":3482},[3483,3484,3485,3486,3487,3488,3489,3490,3491,3492,3493],{"title":74,"path":75},{"title":77,"path":78},{"title":59,"path":80},{"title":62,"path":82},{"title":84,"path":85},{"title":87,"path":88},{"title":90,"path":91},{"title":93,"path":94},{"title":96,"path":97},{"title":99,"path":100},{"title":102,"path":103},{"name":105,"items":3495},[3496,3497,3498,3499,3500,3501,3502,3503,3504,3505,3506,3507,3508,3509,3510,3511],{"title":108,"path":109},{"title":111,"path":112},{"title":114,"path":115},{"title":117,"path":118},{"title":120,"path":121},{"title":123,"path":124},{"title":126,"path":127},{"title":129,"path":130},{"title":132,"path":133},{"title":135,"path":136},{"title":138,"path":139},{"title":141,"path":142},{"title":144,"path":145},{"title":147,"path":148},{"title":150,"path":151},{"title":153,"path":154},{"name":156,"items":3513},[3514,3515,3516,3517],{"title":159,"path":160},{"title":162,"path":163},{"title":165,"path":166},{"title":168,"path":169},{"name":171,"items":3519},[3520,3521,3522,3523,3524,3525,3526],{"title":174,"path":175},{"title":177,"path":178},{"title":180,"path":181},{"title":183,"path":184},{"title":186,"path":187},{"title":189,"path":190},{"title":192,"path":193},{},1780318590602]