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