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