[{"data":1,"prerenderedAt":1621},["ShallowReactive",2],{"navigation_docs":3,"-drupal-routes":225,"-drupal-routes-surround":1617},[4,27,77,123,157,211],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":26},"Get started","majesticons:rocket-3-start-line","\u002Fget-started","1.get-started",[10,14,18,22],{"title":11,"path":12,"stem":13},"How it works","\u002Fget-started\u002Fhow-it-works","1.get-started\u002F10.how-it-works",{"title":15,"path":16,"stem":17},"Play online","\u002Fget-started\u002Fplay-online","1.get-started\u002F20.play-online",{"title":19,"path":20,"stem":21},"Create a new project","\u002Fget-started\u002Fcreate-new-project","1.get-started\u002F30.create-new-project",{"title":23,"path":24,"stem":25},"First steps","\u002Fget-started\u002Ffirst-steps","1.get-started\u002F40.first-steps",false,{"title":28,"icon":29,"path":30,"stem":31,"children":32,"page":26},"Guide","mdi:book-open-page-variant-outline","\u002Fguide","2.guide",[33,37,41,45,49,53,57,61,65,69,73],{"title":34,"path":35,"stem":36},"Customized API Output","\u002Fguide\u002Fcustomized-api-output","2.guide\u002F05.customized-api-output",{"title":38,"path":39,"stem":40},"Pages & Routing","\u002Fguide\u002Fpages-routing","2.guide\u002F10.pages-routing",{"title":42,"path":43,"stem":44},"Site layout & Menus","\u002Fguide\u002Fsite-layout-menus","2.guide\u002F20.site-layout-menus",{"title":46,"path":47,"stem":48},"Authentication","\u002Fguide\u002Fauthentication","2.guide\u002F40.authentication",{"title":50,"path":51,"stem":52},"Metatags & Local tasks","\u002Fguide\u002Fmetatags-local-tasks","2.guide\u002F50.metatags-local-tasks",{"title":54,"path":55,"stem":56},"Breadcrumbs & Messages","\u002Fguide\u002Fbreadcrumbs-messages","2.guide\u002F60.breadcrumbs-messages",{"title":58,"path":59,"stem":60},"Redirects","\u002Fguide\u002Fredirects","2.guide\u002F65.redirects",{"title":62,"path":63,"stem":64},"Editorial previews","\u002Fguide\u002Feditorial-previews","2.guide\u002F70.editorial-previews",{"title":66,"path":67,"stem":68},"Layout builder","\u002Fguide\u002Flayout-builder","2.guide\u002F80.layout-builder",{"title":70,"path":71,"stem":72},"Drupal Canvas","\u002Fguide\u002Fcanvas","2.guide\u002F90.canvas",{"title":74,"path":75,"stem":76},"Drupal CMS","\u002Fguide\u002Fdrupal-cms","2.guide\u002F95.drupal-cms",{"title":78,"icon":79,"path":80,"stem":81,"children":82,"page":26},"Advanced topics","bi:diagram-3","\u002Fadvanced-topics","3.advanced-topics",[83,87,91,95,99,103,107,111,115,119],{"title":84,"path":85,"stem":86},"Multi-frontend","\u002Fadvanced-topics\u002Fmulti-frontend","3.advanced-topics\u002F05.multi-frontend",{"title":88,"path":89,"stem":90},"Listings, Views","\u002Fadvanced-topics\u002Flistings-views","3.advanced-topics\u002F10.listings-views",{"title":92,"path":93,"stem":94},"Searches","\u002Fadvanced-topics\u002Fsearches","3.advanced-topics\u002F20.searches",{"title":96,"path":97,"stem":98},"JSON-API & GraphQL","\u002Fadvanced-topics\u002Fjsonapi-graphql","3.advanced-topics\u002F30.jsonapi-graphql",{"title":100,"path":101,"stem":102},"Caching","\u002Fadvanced-topics\u002Fcaching","3.advanced-topics\u002F40.caching",{"title":104,"path":105,"stem":106},"Error pages","\u002Fadvanced-topics\u002Ferror-pages","3.advanced-topics\u002F50.error-pages",{"title":108,"path":109,"stem":110},"Drupal forms","\u002Fadvanced-topics\u002Fdrupal-forms","3.advanced-topics\u002F60.drupal-forms",{"title":112,"path":113,"stem":114},"Site Templates","\u002Fadvanced-topics\u002Fsite-templates","3.advanced-topics\u002F65.site-templates",{"title":116,"path":117,"stem":118},"Block layout","\u002Fadvanced-topics\u002Fblock-layout","3.advanced-topics\u002F70.block-layout",{"title":120,"path":121,"stem":122},"Debugging API requests","\u002Fadvanced-topics\u002Fdebugging","3.advanced-topics\u002F80.debugging",{"title":124,"icon":125,"path":126,"stem":127,"children":128,"page":26},"Drupal","simple-icons:drupal","\u002Fdrupal","4.drupal",[129,133,137,141,145,149,153],{"title":130,"path":131,"stem":132},"Key modules","\u002Fdrupal\u002Fkey-modules","4.drupal\u002F10.key-modules",{"title":134,"path":135,"stem":136},"Custom elements","\u002Fdrupal\u002Fcustom-elements","4.drupal\u002F20.custom-elements",{"title":138,"path":139,"stem":140},"Routes","\u002Fdrupal\u002Froutes","4.drupal\u002F30.routes",{"title":142,"path":143,"stem":144},"Providing blocks","\u002Fdrupal\u002Fproviding-blocks","4.drupal\u002F40.providing-blocks",{"title":146,"path":147,"stem":148},"Custom Element Processors","\u002Fdrupal\u002Fcustom-element-processors","4.drupal\u002F50.custom-element-processors",{"title":150,"path":151,"stem":152},"Adding Drupal forms","\u002Fdrupal\u002Fadd-drupal-forms","4.drupal\u002F60.add-drupal-forms",{"title":154,"path":155,"stem":156},"Providing themes","\u002Fdrupal\u002Fthemes","4.drupal\u002F70.themes",{"title":158,"icon":159,"path":160,"stem":161,"children":162,"page":26},"Nuxt","simple-icons:nuxtdotjs","\u002Fnuxt","5.nuxt",[163,167,171,175,179,183,187,191,195,199,203,207],{"title":164,"path":165,"stem":166},"Introduction","\u002Fnuxt\u002Fintroduction","5.nuxt\u002F10.introduction",{"title":168,"path":169,"stem":170},"Setup","\u002Fnuxt\u002Fsetup","5.nuxt\u002F20.setup",{"title":172,"path":173,"stem":174},"Rendering Custom Elements","\u002Fnuxt\u002Frender-custom-elements","5.nuxt\u002F30.render-custom-elements",{"title":176,"path":177,"stem":178},"Default components","\u002Fnuxt\u002Fdefault-components","5.nuxt\u002F32.default-components",{"title":180,"path":181,"stem":182},"Composables","\u002Fnuxt\u002Fcomposables","5.nuxt\u002F35.composables",{"title":184,"path":185,"stem":186},"Custom Routes","\u002Fnuxt\u002Fcustom-routes","5.nuxt\u002F40.custom-routes",{"title":188,"path":189,"stem":190},"Page Layouts","\u002Fnuxt\u002Fpage-layouts","5.nuxt\u002F50.page-layouts",{"title":192,"path":193,"stem":194},"Component Previews","\u002Fnuxt\u002Fcomponent-previews","5.nuxt\u002F55.component-previews",{"title":196,"path":197,"stem":198},"Component Index","\u002Fnuxt\u002Fcanvas-components","5.nuxt\u002F57.canvas-components",{"title":200,"path":201,"stem":202},"Rendering modes","\u002Fnuxt\u002Frendering-modes","5.nuxt\u002F60.rendering-modes",{"title":204,"path":205,"stem":206},"Deployment options","\u002Fnuxt\u002Fdeployment","5.nuxt\u002F70.deployment",{"title":208,"path":209,"stem":210},"Resources","\u002Fnuxt\u002Fresources","5.nuxt\u002F90.resources",{"title":212,"icon":213,"path":214,"stem":215,"children":216,"page":26},"Deployment","solar:server-square-cloud-linear","\u002Fdeployment","6.deployment",[217,221],{"title":218,"path":219,"stem":220},"Deployment Strategies","\u002Fdeployment\u002Fdeployment-strategy","6.deployment\u002F10.deployment-strategy",{"title":222,"path":223,"stem":224},"Unified Hosting","\u002Fdeployment\u002Funified-hosting","6.deployment\u002F20.unified-hosting",{"id":226,"title":138,"body":227,"description":1611,"extension":1612,"links":1613,"meta":1614,"navigation":426,"path":139,"seo":1615,"stem":140,"__hash__":1616},"docs\u002F4.drupal\u002F30.routes.md",{"type":228,"value":229,"toc":1608},"minimark",[230,246,370,373,671,674,1202,1207,1217,1604],[231,232,233,234,238,239,242,243,245],"p",{},"The Lupus CE Renderer module takes care of rendering routes of the format ",[235,236,237],"code",{},"custom_elements"," via Drupal's regular routing system. That means a route can be defined as usual in Drupal, additionally define the ",[235,240,241],{},"_format"," to be ",[235,244,237],{},":",[247,248,254],"pre",{"className":249,"code":250,"filename":251,"language":252,"meta":253,"style":253},"language-php shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","  MODULE.listing:\n      path: '\u002Fnews'\n      defaults:\n        _title: 'News Listing'\n        _controller: '\\Drupal\\MODULE\\Controller\\NewsController::buildNewsListing'\n      requirements:\n        _format: 'custom_elements'\n        _permission: 'access content'\n\n","MODULE.routing.yml","php","",[235,255,256,275,295,303,318,333,341,355],{"__ignoreMap":253},[257,258,261,265,269,272],"span",{"class":259,"line":260},"line",1,[257,262,264],{"class":263},"sTEyZ","  MODULE",[257,266,268],{"class":267},"sMK4o",".",[257,270,271],{"class":263},"listing",[257,273,274],{"class":267},":\n",[257,276,278,282,285,288,292],{"class":259,"line":277},2,[257,279,281],{"class":280},"sBMFI","      path",[257,283,284],{"class":263},": ",[257,286,287],{"class":267},"'",[257,289,291],{"class":290},"sfazB","\u002Fnews",[257,293,294],{"class":267},"'\n",[257,296,298,301],{"class":259,"line":297},3,[257,299,300],{"class":280},"      defaults",[257,302,274],{"class":263},[257,304,306,309,311,313,316],{"class":259,"line":305},4,[257,307,308],{"class":280},"        _title",[257,310,284],{"class":263},[257,312,287],{"class":267},[257,314,315],{"class":290},"News Listing",[257,317,294],{"class":267},[257,319,321,324,326,328,331],{"class":259,"line":320},5,[257,322,323],{"class":280},"        _controller",[257,325,284],{"class":263},[257,327,287],{"class":267},[257,329,330],{"class":290},"\\Drupal\\MODULE\\Controller\\NewsController::buildNewsListing",[257,332,294],{"class":267},[257,334,336,339],{"class":259,"line":335},6,[257,337,338],{"class":280},"      requirements",[257,340,274],{"class":263},[257,342,344,347,349,351,353],{"class":259,"line":343},7,[257,345,346],{"class":280},"        _format",[257,348,284],{"class":263},[257,350,287],{"class":267},[257,352,237],{"class":290},[257,354,294],{"class":267},[257,356,358,361,363,365,368],{"class":259,"line":357},8,[257,359,360],{"class":280},"        _permission",[257,362,284],{"class":263},[257,364,287],{"class":267},[257,366,367],{"class":290},"access content",[257,369,294],{"class":267},[231,371,372],{},"Next, the controller may simple return a custom element object:",[247,374,377],{"className":249,"code":375,"filename":376,"language":252,"meta":253,"style":253},"  \u003C?php\n     class NewsController extends ControllerBase {\n      public function buildNewsListing() {\n\n        $articles[] = CustomElement::create('article-teaser')\n          ->setAttribute('href', 'https:\u002F\u002Fexample.com\u002Fnews\u002F1')\n          ->setAttribute('excerpt', 'The excerpt of the news entry.');\n\n        $articles[] = CustomElement::create('article-teaser')\n          ->setAttribute('href', 'https:\u002F\u002Fexample.com\u002Fnews\u002F2')\n          ->setAttribute('excerpt', 'The excerpt of another news entry.');\n\n        return CustomElement::create('teaser-listing')\n          ->setSlotFromNestedElements('default', $articles);\n      }\n     }\n","Controller\u002FNews.php",[235,378,379,387,405,422,428,464,494,521,525,552,578,604,609,633,659,665],{"__ignoreMap":253},[257,380,381,384],{"class":259,"line":260},[257,382,383],{"class":267},"  \u003C?",[257,385,386],{"class":263},"php\n",[257,388,389,393,396,399,402],{"class":259,"line":277},[257,390,392],{"class":391},"spNyl","     class",[257,394,395],{"class":280}," NewsController",[257,397,398],{"class":391}," extends",[257,400,401],{"class":280}," ControllerBase",[257,403,404],{"class":267}," {\n",[257,406,407,410,413,417,420],{"class":259,"line":297},[257,408,409],{"class":391},"      public",[257,411,412],{"class":391}," function",[257,414,416],{"class":415},"s2Zo4"," buildNewsListing",[257,418,419],{"class":267},"()",[257,421,404],{"class":267},[257,423,424],{"class":259,"line":305},[257,425,427],{"emptyLinePlaceholder":426},true,"\n",[257,429,430,433,436,439,442,445,448,451,454,456,459,461],{"class":259,"line":320},[257,431,432],{"class":267},"        $",[257,434,435],{"class":263},"articles",[257,437,438],{"class":267},"[]",[257,440,441],{"class":267}," =",[257,443,444],{"class":280}," CustomElement",[257,446,447],{"class":267},"::",[257,449,450],{"class":415},"create",[257,452,453],{"class":267},"(",[257,455,287],{"class":267},[257,457,458],{"class":290},"article-teaser",[257,460,287],{"class":267},[257,462,463],{"class":267},")\n",[257,465,466,469,472,474,476,479,481,484,487,490,492],{"class":259,"line":335},[257,467,468],{"class":267},"          ->",[257,470,471],{"class":415},"setAttribute",[257,473,453],{"class":267},[257,475,287],{"class":267},[257,477,478],{"class":290},"href",[257,480,287],{"class":267},[257,482,483],{"class":267},",",[257,485,486],{"class":267}," '",[257,488,489],{"class":290},"https:\u002F\u002Fexample.com\u002Fnews\u002F1",[257,491,287],{"class":267},[257,493,463],{"class":267},[257,495,496,498,500,502,504,507,509,511,513,516,518],{"class":259,"line":343},[257,497,468],{"class":267},[257,499,471],{"class":415},[257,501,453],{"class":267},[257,503,287],{"class":267},[257,505,506],{"class":290},"excerpt",[257,508,287],{"class":267},[257,510,483],{"class":267},[257,512,486],{"class":267},[257,514,515],{"class":290},"The excerpt of the news entry.",[257,517,287],{"class":267},[257,519,520],{"class":267},");\n",[257,522,523],{"class":259,"line":357},[257,524,427],{"emptyLinePlaceholder":426},[257,526,528,530,532,534,536,538,540,542,544,546,548,550],{"class":259,"line":527},9,[257,529,432],{"class":267},[257,531,435],{"class":263},[257,533,438],{"class":267},[257,535,441],{"class":267},[257,537,444],{"class":280},[257,539,447],{"class":267},[257,541,450],{"class":415},[257,543,453],{"class":267},[257,545,287],{"class":267},[257,547,458],{"class":290},[257,549,287],{"class":267},[257,551,463],{"class":267},[257,553,555,557,559,561,563,565,567,569,571,574,576],{"class":259,"line":554},10,[257,556,468],{"class":267},[257,558,471],{"class":415},[257,560,453],{"class":267},[257,562,287],{"class":267},[257,564,478],{"class":290},[257,566,287],{"class":267},[257,568,483],{"class":267},[257,570,486],{"class":267},[257,572,573],{"class":290},"https:\u002F\u002Fexample.com\u002Fnews\u002F2",[257,575,287],{"class":267},[257,577,463],{"class":267},[257,579,581,583,585,587,589,591,593,595,597,600,602],{"class":259,"line":580},11,[257,582,468],{"class":267},[257,584,471],{"class":415},[257,586,453],{"class":267},[257,588,287],{"class":267},[257,590,506],{"class":290},[257,592,287],{"class":267},[257,594,483],{"class":267},[257,596,486],{"class":267},[257,598,599],{"class":290},"The excerpt of another news entry.",[257,601,287],{"class":267},[257,603,520],{"class":267},[257,605,607],{"class":259,"line":606},12,[257,608,427],{"emptyLinePlaceholder":426},[257,610,612,616,618,620,622,624,626,629,631],{"class":259,"line":611},13,[257,613,615],{"class":614},"s7zQu","        return",[257,617,444],{"class":280},[257,619,447],{"class":267},[257,621,450],{"class":415},[257,623,453],{"class":267},[257,625,287],{"class":267},[257,627,628],{"class":290},"teaser-listing",[257,630,287],{"class":267},[257,632,463],{"class":267},[257,634,636,638,641,643,645,648,650,652,655,657],{"class":259,"line":635},14,[257,637,468],{"class":267},[257,639,640],{"class":415},"setSlotFromNestedElements",[257,642,453],{"class":267},[257,644,287],{"class":267},[257,646,647],{"class":290},"default",[257,649,287],{"class":267},[257,651,483],{"class":267},[257,653,654],{"class":267}," $",[257,656,435],{"class":263},[257,658,520],{"class":267},[257,660,662],{"class":259,"line":661},15,[257,663,664],{"class":267},"      }\n",[257,666,668],{"class":259,"line":667},16,[257,669,670],{"class":267},"     }\n",[231,672,673],{},"The Lupus CE renderer module is taking care of rendering the element into either markup or JSON serialization:",[675,676,677,1047],"code-group",{},[247,678,683],{"className":679,"code":680,"filename":681,"language":682,"meta":253,"style":253},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n\n    \"title\": \"News Listing\",\n    \"content_format\": \"json\",\n    \"content\": {\n          \"element\": \"teaser-listing\",\n          \"props\": {\n                \"title\": \"Latest news\",\n                \"icon\": \"news\"\n          },\n          \"slots\": {\n                \"default\": [\n                      {\n                            \"element\": \"article-teaser\",\n                            \"props\": {\n                                  \"href\": \"https:\u002F\u002Fexample.com\u002Fnews\u002F1\",\n                                  \"excerpt\": \"The excerpt of the news entry.\"\n                            }\n                      },\n                      {\n                            \"element\": \"article-teaser\",\n                            \"props\": {\n                                  \"href\": \"https:\u002F\u002Fexample.com\u002Fnews\u002F2\",\n                                  \"excerpt\": \"The excerpt of another news entry.\"\n                            }\n                      }\n                ]\n          }\n    }\n}\n","\u002Fce-api\u002Fnews","json",[235,684,685,690,694,717,736,749,769,782,803,822,827,840,853,858,878,890,910,927,933,939,944,963,976,995,1012,1017,1023,1029,1035,1041],{"__ignoreMap":253},[257,686,687],{"class":259,"line":260},[257,688,689],{"class":267},"{\n",[257,691,692],{"class":259,"line":277},[257,693,427],{"emptyLinePlaceholder":426},[257,695,696,699,702,705,707,710,712,714],{"class":259,"line":297},[257,697,698],{"class":267},"    \"",[257,700,701],{"class":391},"title",[257,703,704],{"class":267},"\"",[257,706,245],{"class":267},[257,708,709],{"class":267}," \"",[257,711,315],{"class":290},[257,713,704],{"class":267},[257,715,716],{"class":267},",\n",[257,718,719,721,724,726,728,730,732,734],{"class":259,"line":305},[257,720,698],{"class":267},[257,722,723],{"class":391},"content_format",[257,725,704],{"class":267},[257,727,245],{"class":267},[257,729,709],{"class":267},[257,731,682],{"class":290},[257,733,704],{"class":267},[257,735,716],{"class":267},[257,737,738,740,743,745,747],{"class":259,"line":320},[257,739,698],{"class":267},[257,741,742],{"class":391},"content",[257,744,704],{"class":267},[257,746,245],{"class":267},[257,748,404],{"class":267},[257,750,751,754,757,759,761,763,765,767],{"class":259,"line":335},[257,752,753],{"class":267},"          \"",[257,755,756],{"class":280},"element",[257,758,704],{"class":267},[257,760,245],{"class":267},[257,762,709],{"class":267},[257,764,628],{"class":290},[257,766,704],{"class":267},[257,768,716],{"class":267},[257,770,771,773,776,778,780],{"class":259,"line":343},[257,772,753],{"class":267},[257,774,775],{"class":280},"props",[257,777,704],{"class":267},[257,779,245],{"class":267},[257,781,404],{"class":267},[257,783,784,787,790,792,794,796,799,801],{"class":259,"line":357},[257,785,786],{"class":267},"                \"",[257,788,701],{"class":789},"sbssI",[257,791,704],{"class":267},[257,793,245],{"class":267},[257,795,709],{"class":267},[257,797,798],{"class":290},"Latest news",[257,800,704],{"class":267},[257,802,716],{"class":267},[257,804,805,807,810,812,814,816,819],{"class":259,"line":527},[257,806,786],{"class":267},[257,808,809],{"class":789},"icon",[257,811,704],{"class":267},[257,813,245],{"class":267},[257,815,709],{"class":267},[257,817,818],{"class":290},"news",[257,820,821],{"class":267},"\"\n",[257,823,824],{"class":259,"line":554},[257,825,826],{"class":267},"          },\n",[257,828,829,831,834,836,838],{"class":259,"line":580},[257,830,753],{"class":267},[257,832,833],{"class":280},"slots",[257,835,704],{"class":267},[257,837,245],{"class":267},[257,839,404],{"class":267},[257,841,842,844,846,848,850],{"class":259,"line":606},[257,843,786],{"class":267},[257,845,647],{"class":789},[257,847,704],{"class":267},[257,849,245],{"class":267},[257,851,852],{"class":267}," [\n",[257,854,855],{"class":259,"line":611},[257,856,857],{"class":267},"                      {\n",[257,859,860,863,866,868,870,872,874,876],{"class":259,"line":635},[257,861,862],{"class":267},"                            \"",[257,864,756],{"class":865},"swJcz",[257,867,704],{"class":267},[257,869,245],{"class":267},[257,871,709],{"class":267},[257,873,458],{"class":290},[257,875,704],{"class":267},[257,877,716],{"class":267},[257,879,880,882,884,886,888],{"class":259,"line":661},[257,881,862],{"class":267},[257,883,775],{"class":865},[257,885,704],{"class":267},[257,887,245],{"class":267},[257,889,404],{"class":267},[257,891,892,895,898,900,902,904,906,908],{"class":259,"line":667},[257,893,894],{"class":267},"                                  \"",[257,896,478],{"class":897},"su27w",[257,899,704],{"class":267},[257,901,245],{"class":267},[257,903,709],{"class":267},[257,905,489],{"class":290},[257,907,704],{"class":267},[257,909,716],{"class":267},[257,911,913,915,917,919,921,923,925],{"class":259,"line":912},17,[257,914,894],{"class":267},[257,916,506],{"class":897},[257,918,704],{"class":267},[257,920,245],{"class":267},[257,922,709],{"class":267},[257,924,515],{"class":290},[257,926,821],{"class":267},[257,928,930],{"class":259,"line":929},18,[257,931,932],{"class":267},"                            }\n",[257,934,936],{"class":259,"line":935},19,[257,937,938],{"class":267},"                      },\n",[257,940,942],{"class":259,"line":941},20,[257,943,857],{"class":267},[257,945,947,949,951,953,955,957,959,961],{"class":259,"line":946},21,[257,948,862],{"class":267},[257,950,756],{"class":865},[257,952,704],{"class":267},[257,954,245],{"class":267},[257,956,709],{"class":267},[257,958,458],{"class":290},[257,960,704],{"class":267},[257,962,716],{"class":267},[257,964,966,968,970,972,974],{"class":259,"line":965},22,[257,967,862],{"class":267},[257,969,775],{"class":865},[257,971,704],{"class":267},[257,973,245],{"class":267},[257,975,404],{"class":267},[257,977,979,981,983,985,987,989,991,993],{"class":259,"line":978},23,[257,980,894],{"class":267},[257,982,478],{"class":897},[257,984,704],{"class":267},[257,986,245],{"class":267},[257,988,709],{"class":267},[257,990,573],{"class":290},[257,992,704],{"class":267},[257,994,716],{"class":267},[257,996,998,1000,1002,1004,1006,1008,1010],{"class":259,"line":997},24,[257,999,894],{"class":267},[257,1001,506],{"class":897},[257,1003,704],{"class":267},[257,1005,245],{"class":267},[257,1007,709],{"class":267},[257,1009,599],{"class":290},[257,1011,821],{"class":267},[257,1013,1015],{"class":259,"line":1014},25,[257,1016,932],{"class":267},[257,1018,1020],{"class":259,"line":1019},26,[257,1021,1022],{"class":267},"                      }\n",[257,1024,1026],{"class":259,"line":1025},27,[257,1027,1028],{"class":267},"                ]\n",[257,1030,1032],{"class":259,"line":1031},28,[257,1033,1034],{"class":267},"          }\n",[257,1036,1038],{"class":259,"line":1037},29,[257,1039,1040],{"class":267},"    }\n",[257,1042,1044],{"class":259,"line":1043},30,[257,1045,1046],{"class":267},"}\n",[247,1048,1051],{"className":679,"code":1049,"filename":1050,"language":682,"meta":253,"style":253},"{\n    \"title\": \"News Listing\",\n    \"content_format\": \"markup\",\n    \"content\": \"\n      \u003Cteaser-listing title=\\\"Latest news\\\" icon=\\\"news\\\">\n        \u003Carticle-teaser to=\\\"https:\u002F\u002Fexample.com\u002Fnews\u002F1\\\" excerpt=\\\"The excerpt of the news entry.\\\" slot=\\\"default\\\">\u003C\u002Farticle-teaser>\n        \u003Carticle-teaser to=\\\"https:\u002F\u002Fexample.com\u002Fnews\u002F2\\\" excerpt=\\\"The excerpt of another news entry.\\\" slot=\\\"default\\\">\u003C\u002Farticle-teaser>\n      \u003C\u002Fteaser-listing>\"\n}\n","\u002Fce-api\u002Fnews?_content_format=markup",[235,1052,1053,1057,1075,1094,1107,1131,1163,1191,1198],{"__ignoreMap":253},[257,1054,1055],{"class":259,"line":260},[257,1056,689],{"class":267},[257,1058,1059,1061,1063,1065,1067,1069,1071,1073],{"class":259,"line":277},[257,1060,698],{"class":267},[257,1062,701],{"class":391},[257,1064,704],{"class":267},[257,1066,245],{"class":267},[257,1068,709],{"class":267},[257,1070,315],{"class":290},[257,1072,704],{"class":267},[257,1074,716],{"class":267},[257,1076,1077,1079,1081,1083,1085,1087,1090,1092],{"class":259,"line":297},[257,1078,698],{"class":267},[257,1080,723],{"class":391},[257,1082,704],{"class":267},[257,1084,245],{"class":267},[257,1086,709],{"class":267},[257,1088,1089],{"class":290},"markup",[257,1091,704],{"class":267},[257,1093,716],{"class":267},[257,1095,1096,1098,1100,1102,1104],{"class":259,"line":305},[257,1097,698],{"class":267},[257,1099,742],{"class":391},[257,1101,704],{"class":267},[257,1103,245],{"class":267},[257,1105,1106],{"class":267}," \"\n",[257,1108,1109,1112,1115,1117,1119,1122,1124,1126,1128],{"class":259,"line":320},[257,1110,1111],{"class":290},"      \u003Cteaser-listing title=",[257,1113,1114],{"class":263},"\\\"",[257,1116,798],{"class":290},[257,1118,1114],{"class":263},[257,1120,1121],{"class":290}," icon=",[257,1123,1114],{"class":263},[257,1125,818],{"class":290},[257,1127,1114],{"class":263},[257,1129,1130],{"class":290},">\n",[257,1132,1133,1136,1138,1140,1142,1145,1147,1149,1151,1154,1156,1158,1160],{"class":259,"line":335},[257,1134,1135],{"class":290},"        \u003Carticle-teaser to=",[257,1137,1114],{"class":263},[257,1139,489],{"class":290},[257,1141,1114],{"class":263},[257,1143,1144],{"class":290}," excerpt=",[257,1146,1114],{"class":263},[257,1148,515],{"class":290},[257,1150,1114],{"class":263},[257,1152,1153],{"class":290}," slot=",[257,1155,1114],{"class":263},[257,1157,647],{"class":290},[257,1159,1114],{"class":263},[257,1161,1162],{"class":290},">\u003C\u002Farticle-teaser>\n",[257,1164,1165,1167,1169,1171,1173,1175,1177,1179,1181,1183,1185,1187,1189],{"class":259,"line":343},[257,1166,1135],{"class":290},[257,1168,1114],{"class":263},[257,1170,573],{"class":290},[257,1172,1114],{"class":263},[257,1174,1144],{"class":290},[257,1176,1114],{"class":263},[257,1178,599],{"class":290},[257,1180,1114],{"class":263},[257,1182,1153],{"class":290},[257,1184,1114],{"class":263},[257,1186,647],{"class":290},[257,1188,1114],{"class":263},[257,1190,1162],{"class":290},[257,1192,1193,1196],{"class":259,"line":357},[257,1194,1195],{"class":290},"      \u003C\u002Fteaser-listing>",[257,1197,821],{"class":267},[257,1199,1200],{"class":259,"line":527},[257,1201,1046],{"class":267},[1203,1204,1206],"h2",{"id":1205},"multiple-routes-at-one-path","Multiple routes at one path",[231,1208,1209,1210,1213,1214,1216],{},"Note that the routing system supports routes at the same path with varying formats, thus a ",[235,1211,1212],{},"html"," and a ",[235,1215,237],{}," formatted route can co-exist at the same path. This may be used to clone routes and to customize them as needed.",[247,1218,1220],{"className":249,"code":1219,"language":252,"meta":253,"style":253},"\n\u002F**\n * Creates CE variants for user forms.\n *\u002F\nclass RouteSubscriber extends RouteSubscriberBase {\n\n  \u002F**\n   * {@inheritdoc}\n   *\u002F\n  protected function alterRoutes(RouteCollection $collection) {\n    \u002F\u002F Provide CE variants for user forms.\n    $form_route_ids = ['user.login', 'user.pass', 'user.register'];\n    foreach ($form_route_ids as $form_route_id) {\n      $route = $collection->get($form_route_id);\n      $ce_route = clone $route;\n      $ce_route->setRequirement('_format', 'custom_elements');\n      \u002F\u002F Then customize the new route as needed:\n      $form = $route->hasDefault('_entity_form') ? 'entity_form' : 'form';\n      $ce_route->setDefault('_controller', \"lupus_decoupled_form.controller.$form:getContentResult\");\n      \u002F\u002F Add it to the route collection.\n      $collection->add(\"lupus_decoupled.{$form_route_id}\", $ce_route);\n    }\n  }\n\n}\n\n",[235,1221,1222,1226,1232,1237,1242,1257,1261,1266,1277,1282,1307,1312,1354,1376,1403,1423,1453,1458,1509,1548,1553,1587,1591,1596,1600],{"__ignoreMap":253},[257,1223,1224],{"class":259,"line":260},[257,1225,427],{"emptyLinePlaceholder":426},[257,1227,1228],{"class":259,"line":277},[257,1229,1231],{"class":1230},"sHwdD","\u002F**\n",[257,1233,1234],{"class":259,"line":297},[257,1235,1236],{"class":1230}," * Creates CE variants for user forms.\n",[257,1238,1239],{"class":259,"line":305},[257,1240,1241],{"class":1230}," *\u002F\n",[257,1243,1244,1247,1250,1252,1255],{"class":259,"line":320},[257,1245,1246],{"class":391},"class",[257,1248,1249],{"class":280}," RouteSubscriber",[257,1251,398],{"class":391},[257,1253,1254],{"class":280}," RouteSubscriberBase",[257,1256,404],{"class":267},[257,1258,1259],{"class":259,"line":335},[257,1260,427],{"emptyLinePlaceholder":426},[257,1262,1263],{"class":259,"line":343},[257,1264,1265],{"class":1230},"  \u002F**\n",[257,1267,1268,1271,1275],{"class":259,"line":357},[257,1269,1270],{"class":1230},"   * {",[257,1272,1274],{"class":1273},"svl4J","@inheritdoc",[257,1276,1046],{"class":1230},[257,1278,1279],{"class":259,"line":527},[257,1280,1281],{"class":1230},"   *\u002F\n",[257,1283,1284,1287,1289,1292,1294,1297,1299,1302,1305],{"class":259,"line":554},[257,1285,1286],{"class":391},"  protected",[257,1288,412],{"class":391},[257,1290,1291],{"class":415}," alterRoutes",[257,1293,453],{"class":267},[257,1295,1296],{"class":280},"RouteCollection",[257,1298,654],{"class":267},[257,1300,1301],{"class":263},"collection",[257,1303,1304],{"class":267},")",[257,1306,404],{"class":267},[257,1308,1309],{"class":259,"line":580},[257,1310,1311],{"class":1230},"    \u002F\u002F Provide CE variants for user forms.\n",[257,1313,1314,1317,1320,1323,1326,1328,1331,1333,1335,1337,1340,1342,1344,1346,1349,1351],{"class":259,"line":606},[257,1315,1316],{"class":267},"    $",[257,1318,1319],{"class":263},"form_route_ids ",[257,1321,1322],{"class":267},"=",[257,1324,1325],{"class":267}," [",[257,1327,287],{"class":267},[257,1329,1330],{"class":290},"user.login",[257,1332,287],{"class":267},[257,1334,483],{"class":267},[257,1336,486],{"class":267},[257,1338,1339],{"class":290},"user.pass",[257,1341,287],{"class":267},[257,1343,483],{"class":267},[257,1345,486],{"class":267},[257,1347,1348],{"class":290},"user.register",[257,1350,287],{"class":267},[257,1352,1353],{"class":267},"];\n",[257,1355,1356,1359,1362,1364,1367,1369,1372,1374],{"class":259,"line":611},[257,1357,1358],{"class":614},"    foreach",[257,1360,1361],{"class":267}," ($",[257,1363,1319],{"class":263},[257,1365,1366],{"class":267},"as",[257,1368,654],{"class":267},[257,1370,1371],{"class":263},"form_route_id",[257,1373,1304],{"class":267},[257,1375,404],{"class":267},[257,1377,1378,1381,1384,1386,1388,1390,1393,1396,1399,1401],{"class":259,"line":635},[257,1379,1380],{"class":267},"      $",[257,1382,1383],{"class":263},"route ",[257,1385,1322],{"class":267},[257,1387,654],{"class":267},[257,1389,1301],{"class":263},[257,1391,1392],{"class":267},"->",[257,1394,1395],{"class":415},"get",[257,1397,1398],{"class":267},"($",[257,1400,1371],{"class":263},[257,1402,520],{"class":267},[257,1404,1405,1407,1410,1412,1415,1417,1420],{"class":259,"line":661},[257,1406,1380],{"class":267},[257,1408,1409],{"class":263},"ce_route ",[257,1411,1322],{"class":267},[257,1413,1414],{"class":789}," clone",[257,1416,654],{"class":267},[257,1418,1419],{"class":263},"route",[257,1421,1422],{"class":267},";\n",[257,1424,1425,1427,1430,1432,1435,1437,1439,1441,1443,1445,1447,1449,1451],{"class":259,"line":667},[257,1426,1380],{"class":267},[257,1428,1429],{"class":263},"ce_route",[257,1431,1392],{"class":267},[257,1433,1434],{"class":415},"setRequirement",[257,1436,453],{"class":267},[257,1438,287],{"class":267},[257,1440,241],{"class":290},[257,1442,287],{"class":267},[257,1444,483],{"class":267},[257,1446,486],{"class":267},[257,1448,237],{"class":290},[257,1450,287],{"class":267},[257,1452,520],{"class":267},[257,1454,1455],{"class":259,"line":912},[257,1456,1457],{"class":1230},"      \u002F\u002F Then customize the new route as needed:\n",[257,1459,1460,1462,1465,1467,1469,1471,1473,1476,1478,1480,1483,1485,1487,1490,1492,1495,1497,1500,1502,1505,1507],{"class":259,"line":929},[257,1461,1380],{"class":267},[257,1463,1464],{"class":263},"form ",[257,1466,1322],{"class":267},[257,1468,654],{"class":267},[257,1470,1419],{"class":263},[257,1472,1392],{"class":267},[257,1474,1475],{"class":415},"hasDefault",[257,1477,453],{"class":267},[257,1479,287],{"class":267},[257,1481,1482],{"class":290},"_entity_form",[257,1484,287],{"class":267},[257,1486,1304],{"class":267},[257,1488,1489],{"class":267}," ?",[257,1491,486],{"class":267},[257,1493,1494],{"class":290},"entity_form",[257,1496,287],{"class":267},[257,1498,1499],{"class":267}," :",[257,1501,486],{"class":267},[257,1503,1504],{"class":290},"form",[257,1506,287],{"class":267},[257,1508,1422],{"class":267},[257,1510,1511,1513,1515,1517,1520,1522,1524,1527,1529,1531,1533,1536,1539,1541,1544,1546],{"class":259,"line":935},[257,1512,1380],{"class":267},[257,1514,1429],{"class":263},[257,1516,1392],{"class":267},[257,1518,1519],{"class":415},"setDefault",[257,1521,453],{"class":267},[257,1523,287],{"class":267},[257,1525,1526],{"class":290},"_controller",[257,1528,287],{"class":267},[257,1530,483],{"class":267},[257,1532,709],{"class":267},[257,1534,1535],{"class":290},"lupus_decoupled_form.controller.",[257,1537,1538],{"class":267},"$",[257,1540,1504],{"class":263},[257,1542,1543],{"class":290},":getContentResult",[257,1545,704],{"class":267},[257,1547,520],{"class":267},[257,1549,1550],{"class":259,"line":941},[257,1551,1552],{"class":1230},"      \u002F\u002F Add it to the route collection.\n",[257,1554,1555,1557,1559,1561,1564,1566,1568,1571,1574,1576,1579,1581,1583,1585],{"class":259,"line":946},[257,1556,1380],{"class":267},[257,1558,1301],{"class":263},[257,1560,1392],{"class":267},[257,1562,1563],{"class":415},"add",[257,1565,453],{"class":267},[257,1567,704],{"class":267},[257,1569,1570],{"class":290},"lupus_decoupled.",[257,1572,1573],{"class":267},"{$",[257,1575,1371],{"class":263},[257,1577,1578],{"class":267},"}\"",[257,1580,483],{"class":267},[257,1582,654],{"class":267},[257,1584,1429],{"class":263},[257,1586,520],{"class":267},[257,1588,1589],{"class":259,"line":965},[257,1590,1040],{"class":267},[257,1592,1593],{"class":259,"line":978},[257,1594,1595],{"class":267},"  }\n",[257,1597,1598],{"class":259,"line":997},[257,1599,427],{"emptyLinePlaceholder":426},[257,1601,1602],{"class":259,"line":1014},[257,1603,1046],{"class":267},[1605,1606,1607],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .su27w, html code.shiki .su27w{--shiki-light:#916B53;--shiki-default:#916B53;--shiki-dark:#916B53}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 .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .svl4J, html code.shiki .svl4J{--shiki-light:#F76D47;--shiki-light-font-style:italic;--shiki-default:#F78C6C;--shiki-default-font-style:italic;--shiki-dark:#F78C6C;--shiki-dark-font-style:italic}",{"title":253,"searchDepth":277,"depth":277,"links":1609},[1610],{"id":1205,"depth":277,"text":1206},"The Lupus CE Renderer module takes care of rendering routes of the format custom_elements via Drupal's regular routing system. That means a route can be defined as usual in Drupal, additionally define the _format to be custom_elements:","md",null,{},{"title":138,"description":1611},"tWSRqvITav2KdqNyRD6Qk3qDqjRaMTZU1466RNKY9N4",[1618,1619],{"title":134,"path":135,"stem":136,"description":253,"children":-1},{"title":142,"path":143,"stem":144,"description":1620,"children":-1},"In order to provide blocks that render into custom elements, for example for using as part of the Layout Builder, the block cannot directly return a custom element object, since its interface requires a render array. Instead, simply return the custom element as render array via its helper toRenderArray(). When done so, the custom element is going to be picked up correctly when the layout is rendered.",1779292115212]