Forum

Thread tagged as: Question

HTML5 Templates and Perch

I have a question regarding Perch and the HTML5 <template></template> tag.

An example of my .html markup (redacted for brevity):

<template id="top_template">
<script>
var sheet=(function(){var style = document.createElement('style');document.head.appendChild(style);return style.sheet;})();
sheet.insertRule('.top{padding:0 .5rem .65rem .5rem;}',0);

sheet.insertRule('@font-face{font-family:"Open-Sans-Regular";src:url(data:application/x-font-woff;base64,d09GRk9UVE8AACygAA0AAAAATcQAAQAKAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAABMAAAJRYAAEK3Xqgn3kZGVE0AACZIAAAAHAAAABxu5G/0R0RFRgAAJmQAAAAcAAAAHgAnAFVHUE9TAAAmgAAAAiYAAAQKW6pLAUdTVUIAACioAAAALAAAADC4/7j+T1MvMgAAKNQAAABeAAAAYKE9nsxjbWFwAAApNAAAALUAAAFyfTy6z2hlYWQAACnsAAAAMgAAADYNKJvqaGhlYQAAKiAAAAAgAAAAJA89BRFobXR4AAAqQAAAAQAAAAE8TO8gf21heHAAACtAAAAABgAAAAYAT1AAbmFtZQAAK0gAAAFCAAACInQTDopwb3N0AAAsjAAAABMAAAAg/p0AZnicxXsHlFTVsvYemJ5ugq2EHsI0mSH0AJIle0QyCKg0Ei4XAUEQBQnKVbnSZr3biwqYA6iYGhG4XMCEHEXEiAFbDICImFDUQWSf7tMz+9VX+5zu4a231v/uv/61fhdW15ywQ+3aVV/VrlMgCgtFQUFBjTFXzpx34bR5i0RBNVEghjhR4TSp5jSt7kQK3d21q5fXLmxaUxTe3q6ZlDmmdtDtnr0hGhwVLWoWiIoVp0eFOCNacGadqGgXPftvdUUh2qojIqKpaDtv/rzpC2dOmztn3qWLrpw2Y2aXTl06o9Pm6DXHCPqvQFQT1UVQzBY1RE1RS5wmwuJ0cQY1VFfUE/WpuWLRQDQUjURjUSKiorloKVqJ1qJUtBFtRTvRXsREmeggOopO4kzRWXQRXUU30V30ED3FWaKX6C36iL5ioDhXDBKDxRAxVAwTw8UIMVKMEueJ0WKMGCvOFxeIC8U4ERfjxUVigpgoJonJBbeJMZhRa+rmbDG1+kXV5xR2DQQCAwLDAuMDUwOLi74Nnh2aVXNezR21UmERbnSGXXdLvVb1HogURqYXH2lYs+H7DX9qVK1xl8bnN57a+PuS+iWlJXeWuNG1TS5oWqfpzuYVLeq1SLXs2Kpaq66t4q2uKW3Q5rq2z7bTsXmxPzqVnFlwZuTMNZ2LOke63N91arePelzd89hZ1/Ze1Kdr32Dfy/pd2W9N/xv6r+3/jFsiyzO1ywvKy51sefXy4vTbmc8r3i4qr1wYydR2spW1g+GKYDjrqC+dtpHXMtvcGfK1ym2BIe72SPOaYfd7tTca2BpxR8t/Z9eekAGno7PW++sPGQirI07XaOHKiHxdi7oJsXXjuo3rtOgcsx/Wom/cklr0ZtoxZWn9GxHRMk7c10m7KlcnZmv9WcyWWr+fBH2brurfcPVDkIN4MpU8hXsTNz5OWT0mhs7Xok/Snq5F15i9SIv2SY9qfUJQj2WfJuRLIS0e0rZ2fxV2pAf18Aq9LooxqvepSdERT+e573G3f8qSX9DYy3A5CNIGgw0n7fU+LcaFZphWU3BNQPJcd7xTmhApajVuhZzh2X6BFlo/iDlcm0zwZLWeSgIK6cpewlLLIzSym/BW24TQ+rG49aXWL/lUi/mY8340fRe99BuNbRL+OB33zo/7o/C5r0gg+Hs0yJCkHVLnuUPUNdLdobYFtJiMx6bj3iBwd4PrCO41etTtV6T170l7uNbH0OlOkJ8w3Lcx+jx3mBcJo/0S1z6jd7NlTgm1Pztpv/MZSTHmt9uPxZvjWHbnpKAdQ1lHZsSty7U4LyHO0+KspG1oTy1KUpYrSDCSnuo8X2sa34U+/Tpu9ZdtQ3LmPVp/FbfuZ/Hc7wnpjJg9R4v6rGboMc+1SYjJWvTCiO2k7dYeqvXz0IVXceVjkO14Ns/9mKIZbo4naBjP0VKGK8b/t30Rzm4/4OyKSHegFo3w2hT00w3vzsZY8twI3L0uaR/TejkWpTtJ+sm4peoO0kLiqT146gE8led+QGuPkABUd5LUE7jeEIJ9DNc709udcj/DcP2fcetnLRJYyZ7U/mM0yZDWWxLCLWE9dzvlfqDrelISUxuDqWW3O2swEy02YDTfo4e1vFHQ60PxU7gtuHtbQrTXYrHp7Getl+EihqEX4sHO3I//g2HrabzLSUTS7W4mp2dAh2jCbkfvZ5DWi9Htk7h7oycpMY0mWUhCpKfFTSxYkPtZ2DmuEXbkk3HbzCEUnpcujRbVj7jj5dZss2yJqj7PHeGcdrl7q/ulGtRRdVeVapBbqayf3DvJDNZJLlAjsi3d6oFwRak6rm6MtKgZzt7+tXNFxFmmOmSXFYWzGdXhz0hLulyWns960Edmt0QzI1QfUoXM6+kFEalup+2AgbyMCazH4BJYyjx3GyZh4e40bAAjj9O0fgOXNuKJm0Hy3OckwvPpwQJ+vEbc+rfWg1LWAa0TcY9qsYS1GkrwKCyL6kVSuAbjGIC7Y9D7UpA81xZ3X8WSiCzJuWJzMXGfJu21tMgJsV2Li+OWod5bndH6Fbxp5/FrY31TLbqgd9bKPNcQyziLzLs7i/7ReuPpmbi4BzN9lFU9x23gGyD3sGXUK1hZNrKmJ8TEXyb+spAGxoaDBhkKp6cW0xK4zYPZBu6Ob92iAKu/Fqx8pNLvk4PB32wm89zpnjF/8EGtM+j4XyAVcau3t8krnw6GMy8Vq04VN68Mqk/VB9Twcrz0D5BpXhc72Agb+hRZVZbHX5henbQv0eKvCdGf7C8ZKqZar8KbrSCDq3lmZvFJnGTPrqEVLgx96waor4HsQ0D6QVFa47WecWu1T3snxL10j9r4mjo7B6P/CUtwJjr5BE/nuQa4+wYtQX/fu570PZ4+FrcmGzrfmBxjyj8gEeRZTzzrwGH++g66nY1kG0i3FWn8jZnjsBgLcPtzDHki5rcJwvfoPbjanAxQSyNeouux5Y+DbEraV/r0ZSz9lylrjNYf0fJ+7RaSLIbh7U4gVtJeZ0y3Wcs8x14llLTfY3kMRLs/J+1Xtd4XtwwlVUyIC6nnF1nwTzOiAHk55hv6D5KncE8xGiAHVCRDbhu3lWpdpAvYc7GpfgaE/Ks7SesbknY7ravHrWYjqe1XsRIhNPsi+j0DD+a5V7GgDTBRmxEEydLtGuTFJJeKSwN4+DkDcQKv5rkheDWDLs6DTxhC873DAxu0T5P2Zz7tjKtzgawwYGnUVn/rwwK9O27tNrQ7ve0vLrZFaGXwZ1KyEeikbQ7N9AXJc41xdxTcopgCQ5upVEciqsy9IjPXHRSsGFG5QLql6clSukdUNynVkYDbTZVFslukMyXdNPDMlufsde+FVpKHSpPi19Y6i0GtYu1Yg73tvJ6pEzmb/tqMGw4GuBmEoEloozPSOUCNdqyYK8dVWN+MC/ypRT0MaxzGWwPkbIhnuVR1SqV7MTVzP0OAhOg7grfBCG8zsH874k1fMg4ARkQLISzEy0n7EUMJazbAlY/j1nMhtzut2Xg08B66/Tu47/DSWt7/rOXi5pS1lY3nNz5l88l7H+4Kj+DFvbDCs9H2M0mWqlWVu5UAiGgTs91OMhRWNdIBQMUe6LUDOxC8PAHNLI9X4RSJdHfM9vv5J9MrcaEsIQ4ePniYcDJUZklCSNVBqijtPNydi/f/zfYeree5B/A01EGT54BxhvECtHgL17aCUCehZUUrtfg4h/cexFsXsNUEyXNL2Jtg7I9Qcx9IBvJaqxxi+o0aU62CWn+KS7Vx801wRTwsXqVS1pZJWMEXQe7GrQV4Ms+9HUto3R7boPIQaY4u+FlY2TsjWr/OL78dMzZkEgUlSdtQlsTLtJ6+slfhjsPIEG7mJWSrFE5ZL3qon8OFPEfOdT05z4ZJ29A3aBq03Uh22KLSmDbWPdGZh8oiyXEN4xbUfzWP8y4eBib5HMh7LI74KdzWZbAgZaRFj8N7htWmYjVKOkejgS5SNaqcRluxY3oTgRRnfzTwXsSsI+0LWKpDnike5dPP0cs60o0WkqHearZcmykcSNqGfkD6lbJ+uMi9WGtCpaVa/53bm8CUUNsWGnvM/po3U8j8QCkPpCzVmSa/EvuTRNEaK8DbdlhuAzMXA7mYnT35RnlgISPLiYxmDKUR4um+GPwdnkc4ZkSIwIIC0w58H+4sx1L4AUJOU+6VjGXIU8eTdv93+r+j9X1x0temFC5SmAYtr3yT4kj3aWFF5F7vzf5Q2g45AOpzdPtMTGUGjx0Xb8AIPwKHWA0gaQf7FkOfop2TQHCzgxf4BU8XRnp2CVuoCscu+EeQR8zue5jf2pTy5sMhGY+lCncE4xkwzpZfhdQeXX2vSERYwL6P/AX3O7PjZiXMcYzU3+XRGXv4Bpr7ha96D03xKanFxWyyZ7TYpvW2uLWNcUCO/sJ+gzvtTwshPXQDWCJ6eFBls0/PiSfI81zI+pt5Kf1lxJjIJVositkz2HQYSsLD1EdgNFuS9ms+fQ5TaoTJPcIDv4rFdHfMntqzW89uWqcIhtSWbgdza5Mr9rFsQ+ZHi1lo+gsMi1ZP7pNeiByGGSMX/axPWcdi6Kw1uLNoZveTL3PwOpuvvRjDbEjshbjVzqe34cIeGkN3OZSGsNPDLSRWD8uEXDJ5bDphalhk7CGNu9cFL7MgD5CWFjTRtnQ+IhWtTypaoEhFjdOjbRCzr311zqtz2G0YBRIlaIgNaJ47DT1D/QZLT83KeegggCI6dSq3D0bhYNyawIHbBC98gwnVf+ChnVi39pLi4BKKst+Y/MYiLUaSFv1s9hlh5Hjc2sGTMlSL4RhH03UJLTgZkguvNP1n6+oLtR2RFK/XQh8HsAik7Ff7NIqrfybEerlJPkcPJe3HSbHilqH3adGCxUHGOPTd9Bd7Mx41IFXvFVaXpujNBHnuvPRDcKvsa2qiWYBDkzb48VSuCRaWoVgbWov/ZcccyNF++St16j6vtjhtIyryfJHkFaMeocucsYkk7U0+7YD5nomr5+Kh3nHraxIYxwK8eVjV49bzPq0Xs194YOMDG8lH4s0Ym05SVKmKvLTIBMyC80kD4AtzbDsGohRF8p4xscnSuHWZW3d46C0XKR0LrzcH6c0mlIPD2hwc1sYF6Lwowoiw1Q9QxwOgLMcwkLKkPcunEfZepBNQ/3cY1foqqn8E+eJUDrtcvwXuKQ8BhvwEEKvpuylrEZtTQ5eRPtO0+4cmuX8giamaZE4Uq0EyuzcaeNVtJbOfRTODFDmeYc5M56AMjFcdI9krpLKciQGzM8SopL3GhGvAwu/ximr9PKYO9K9fwmID9JCH7aemIAVA0b+zgrbtY7w5r+OQzRe3WbA81yFml9NDN/KjtGHc6pw/cRduCt0b5PCRAgWQIdwMCCP5Xr6FNhyngIbCQgOFEv07RsnqOxmjJAC6y6eLyGK54ymKua2iKOIsUsuDqr6B7bRA0DxGXl/h3TzXhK0EybK3Hy4B3mob2g/Iq79k9JHjnsPdY4RSa1NHz7utI2pbEScZEBNjEY8m7bfZjhhKux5NbWf7/BTTx9AEZxVfxC0GNZ/wMHLcM7hLoa5bk3rZVRRWjdIfRgPdIn42gugCpheF9qo2AYakO93Gz2hNhl26rYFMMJhv0Ni96I89W55jN/wsyG4G0qdy31I42JDamMPj5VxCHwyVtEXVIACU+9HiaYz0NUhyH+cyxCpsxDqPaTGT/E5ItQ+aB5G71Fqy9AhFSbcPtZzgjYQWnkZbs/FIntuLuyt5d8N4q9GERKEnKxLix5M/ntTi+k9hHhL0/BqAhbA6HA1MSP89ItXVo9Qgt66qi/856feu1lE8kx0HJW5fpP5BrXKMejbhtAZaLCPUZn7IO+P6i6x05XBVw26BzSSHSK7g8oQgCPhI3DJU60sxpT2YQw8IwJ0RLbxbySI/3bQcdz5Eq1Px4GrMLs+diaTrlZx0PQfR5ZLMncWqQ0Uj5wXnuIpljztz041UWcVOGnQwXOoEi9MBulFGN9ZVuaEOpQ+lV0TcDuqr7PigaRpGvJ0x4PohNnSDeTEXJgTBh9VJu9ynH2Jr3MuD3QUxj92u2v72529/qmY2hd0qLFW9+arhhaEPVCzA6RtjG/U8TIqE6naWFLLRHczqG2gdclOAzlW5Z2NG4UbTRZ/S49Cqa2mJGanUZSSA60OxAtfh5aXoL889D+41KMYBo26sosacUMT0FUdQhnrHAtzoeWxLyJalJ5O4TkQDzTihNqCiWsV96WruAOQ1B6QHpe+rGBQMZw+pKcVqAD9QFM46y7KRiKotf6CgKWWRoRzM5nIwZ2mmc+Lhemo5GniW2wlKDtu0/jVn0g8AzXn0g5S1ZHjuFIjT30V4mvHzadC20uCGa7ToQtBHn9Q2+y3S7WPRwp+KsyfTHzqH0qe7U2RFWcUcmZ7jDpCSBy+l87HqqKLOcxUTA+EymkF6p+pU0SgaiGIW6SHpI8WqiXRujwbCK2XAy44xdHdBkBVwRahyoJn4imD20qg74iaZJX3e6q4yvXSRMtMzYMJsfk+FTUPAk6GVRWEnEg2czaLtVvEVaWJl0p6mRQG6QgJKFILjjKnPLScZ4U5B3LomdJOs2BQtfMsdl+suvTcgEU1laHs2JBBEXbYOrZTpzVG3B0V4w6KB15CJ1oLM7lg1yq2pxS3kbLyfXgzCkZO9nIQ9kXUHGkeTdRvkfnbhOnyMe6N0b/ZNXcyGjVtqTN3SvKmL5U3dJ7xp1ibEHi2upgcb53760tujpLo+FHUXFbeqGU5lspk1EbVRa3KOqqWuXJG0m2ZP55Vz9iqrSI2llu7m1EPK+p2T0L97qeiuuLqA9ohqF6q4w/0w4nyvLgiqxtKcbTGIYHhldCjPNUva5+YC61V49CBStOYI6EM85nNuAWFc8HMYnP5/Fesb/1Sb3IOKovjfVWWAs37btLiMQeFIeu2M3E/pOhLMw7wGrwAvuYSiIeyTTtA5EVG7pDqZPaGmyGyLdGlATfjwmA9HkBJRTck9o9NLMcwkBjIIEshzjG/4BHcUe45SXq2i9K2Fzk61IKjqUkuTMSeS0Zvs69/0PH6UE2os9tV+om8+e3uCcx9xFpwoRWk/GhwRnp25z2kUkb+R58WQzo97lgN7vyp3H4bE2AXxG8NjvdZHrCYh2wRWZ2/SftqnSHlwsgb5b3qS0VCO483bnl1dV5YNpg6cTY6VlQ+kDUB0jvVAY7249R0hbnrlKjT0PW78Dd0gq26rdgE3bAJffS0eb4xbDF70YpiaQi8vzel2zkbnOT79ftrPB3nKK5rE7O40e/+pKty0mJESknsf8gW2uuCGJcTlJrjQR3gWPrveQDDvxDR5CseB0WecFviA++eE7LcM0birpH2xT5No7ygWfDlPDoHrYHOYbsKOMIPpHEdQafUYlnDI7RX00CkgPnaWOXYW6/1TUPIrG/iRvT7tlExocUkc64Wjz/CCNDxZM2eGKqvc75Y5M6KZbwAIooFGfGg3oHIULZHmtlnej6d8Kb8Wr8J1oKljajfzJKhf2d7TKpbwOTlZn+O3JKYA6IVDmdHUycCgdPtx2tdtyDngMp/eHrMnU2BC/7T4B0MevHsJAyL8mee60gI2oKeexrx2Z9bw+A9XWgEvRGILdghkVdxa5JLEf8JrnMkAzhVzwHFO43Ic1B7JDHGHSWcNtm0/6TxJ7QXC6auigV3FTglc1DDpXlvZKMAxoxulwOpONPAH+no8bl2liq/kkGUu24iQ+0wmglceqjzNvMLH9SZnqm9P2teQvnNewYyIY+iF/DbQgXtdpgSjaWRGo/6VmRZYxxUEJvAyR4+kId9qIfD+8aS9ystS1Ylbw32KIz3Ekw9yEBRSr1ReGgg/ES28rzi7NH2fMzE9zB0us9Wy+1zt7HPHSmdixejstRV3K+q7dbqB06SiQSC8zPk4PT+SbZCe746WznWVJTK7k4JF6bznLM3Uc0fJQPjezF4cC/4rmH4kWng/8qoXcl71ZlnxSNSdLd1GgfCS9PfF6vR0okiq+mxnfhy1a9QuzoY+y6A/l/Tbgf2BlLfeAfIbRJbnKPpaHOf8S+g1tx6Z/EUUzLDQn+EaDskWUbJX5ROjjdM3TudiHI7TZI+QHOqOviXgnmSA4A52Q9RnS9ZklBaIptB5Pl3tj4jao/EYGWWoSq79c4GEa8Mq9GS8CFKFgyHlAITTEoMY8bhHL4nwpoatwJu8QBxZcqYhz3EE2pEe3C05+GaDRlEum3S039o3aoabytYpIQj2ACyFVJ8Vsl1AUthxGBPfSI6Zj7UMpYgOoQSOvTBn8ik/pwdmfo0wrma0xkkITq8S9gjdRAFKAN1wyqVa0kYKcBzdcMJun2j6F1Ur+IJqcb8MbDZvii7odF9CvMUB8lveKdA5WJHjmJkpcGEbKOZjTl1wdSxenYEn81w7TEwCzwyjf6Tj/Dca4iWaHreqcnfjbheyK61laJHbLMJ7RjKin7198PbBazmqpUkuYE2j/bqQriB/jkypoWfzaWup9G001ye0QI9c5jEQ/eQ5LgeZR7hedQrR/2u1uCIhtr+//X1SE1jf5stsPgYmGbujnMwSGtJ8E4TErcc4+0Fhb9tgmZeBewJtIjms+chM38vj3JAQG0iySKd79AjkdSk3dCss60ZulrCiOMgTNqm2Ngy8IZMydt8Yq8/RUv2BRpCTgSUKvaZaBK4wtQAoW+L4wjvIq/U/cAG89x4P7y/mcIPF+EzSbutTnODphfzIMH6EA6sy6MZVKeswI/rDHsK/NgVwWZYw+SJSyEwn1TbyuNtWlRC8L6rv9pEye8FdA1b0ux7xCCm0Em7R61rP5fbNet5Na9i3bd+2Mzi9QxdG8uWR6ABFHVhwxsntfUrKN8lUj3FhkfSqJM4C4W03H8Z83/yInzpHsCZaJX1tGJrThqE5bZiDBWkOzGgKby4D4VORkSB5jot2SlMGgphqAaIXQD4H/Xf0dv8dw6FFfQ+XBpIzDM0OmtQkdc3p/YSYwPUyE7yqmfXY59/gtG85i/WGdL0lkRQyrNCKAAbQnXOzhp6FC3Vxq4+H7EKqXdDzdXtyXuwHoHtCZdI7WmiBi+iPTzGqcF+jPT6YwEE2g5D0bSfIBbSbocWSmN1Xi0lxy1CtV+K9jthpJtnKFTWaNvtF3Vt1b0U+DFM0CzuGb41Fo51SltuEAYbWj6KFPLcMwtqTTKieMvRXXf07Pg0wmUEeHh8F4bzSHA/lOc5ubkAyCSfkoezHZABr4MZMEHgIPv41J/+9T+WGoNHoOutbJO5nprtmJkdUxF33SVD+8BD1m7Ke42JMQ6lTvFMfLQ7ggXVkJWCw/idSB/pnGsBW1SjQn4c1lBPr5+Owqz6eAUriNEslYYBmcrQ7YYy01AQpKycr2jKZyYHwrMyuzP5I9vSiKd6e5rpOziO8BXDdEG6CVurcEeeOuFTrJxGE1ZbnEohIWSNZ2S/0aScsDsOMXh5smTKfA8V5HNhcETI/7FlnyxnSy7DXIFz9GIOfx7xjY64Z+AU+20AodjW/Ju0xl3mnKhxx5rmjXmgj/eToYxxfYH15R56H++8yZvdZMsvohLszGxxoGyaymbflaBfgsTzH51d/4fjmGn4DUFMfwoLyqbSN1L5H16astXzAKkPu+KIx0gQiIggJcXVi2NspHoezIFFMG/c56RXptIpbL3Mhqqk0QXbMVF5x2SoqrxhUS85LX8IJJHIX7/mUk+lx1pm55giRy5tw2CZimDnDy1LPvHvcb6y/uHvM0/OQmvpkoKIy6s5BBE8Ofg2bmy0btmxgK/AoR9AypCYXsfrLj7Q+4SXzF/u0LjsN3i9v8v58EZ0dRD+7E4Lc9mdxy1ACHFi0nyGmxfzoE+YFDOd0PsNuCk8MuvBFac6pv8v0wOAu4EOIAXFrC/23e80XKOY7YBy0RvWunp60+/B5ltuzGeuUNPlEUQ+P8DlAWzyX547GxS6DsELhY5muxapPeiqi1H/44xczY/YwVg9DtX4YV0mF3MbS7wPF0/p3zIuzl9+A5LmPIYbPQL72vGfoBh9QlXqA6mWjFCFnrgFUfZyPg9Irr2uMDilMsNlEGErwC1oJrAgAnDvwoBFeRaApaU/1KQeqZs9wrFQRUUeLM/vdPpX7g3+PBhZEWteka1uzOAXf7cEuJdTlzaKFv9NY3MKgPN9ABf0pCGd+GDnmuS9wozxlXSQ5OiX6CYZIJmaKl6YsCXoCZwXsFk94RS1nm9zY1dqOBqdgKGepH51dkRzgZB9cDaQXz681PMgHbi/IqJfTKajqKOE0yD6ExM38dA1nrHOpO1G6J7O1ApxTGk6jRmfvorycY/J9XK4MITCqoIaC4fT10aJSb+1VczhM6pALMt/wbUMV7kmWPCnAGZKBiDQRO6Z2Hke753nRM/JqLAmz8G8ZJA0FUGe4he9oPc5/WXKF6tILrrjgCg828VY55Fu1m+SVKuYSEqrcD6vuIM/Z0jvvmgXCZ2Bc0JrnRvE4Y/Yfkr2V9JIgR2OewSHJWFU55L6RmpOceg9VTCEtdKCFSKgjH+7VyHcB6Xsqh5osU+RjQOlomtmu/31fVfYe5M8ZA5b/9pzU89wjSU/+DaVf8/QKWznsQj6vOsx4JMd9xNYpZs+J/0+C9HcZyCx00iNuvWPo10nGg//B7voic9J5KSLVQFr4lIW04VN8bGLorTFUY8zKVbm6Z3iHQXyUyAdEeY5PchezTeUqBwZhgp3+wxhm+7jVw6dkp4fvmxLaN+Xw4mPSP3LlfGnXmP0dckCWoVp0wCmBTGCRUOKhs9uFxXUFES9TL0rQz2XgzgIZWpU7YMAvB8KqGr1xIYb/FRwqTmD1Nt6qOY5rEe6L+Xk8Qm+49S1W9l7c2p20B/qUq1+/Allp6pxXmqJYtNOa0cdwJENBKRK/jEE2B66Iqf7TUFILztJ9jhcI0vbjCiVDtb4LLXC5tklBbiU6wpSemOiZszh5bo/vUwBYxpCOLTY6Fk2/z0p2EZSMsOFtXCdz03uh+4v+D4Ey6tWOpxImUCZR/ICyj8O0Rn6oMNIXFhKvA33aGIK9n8W9hIV3DY+RFwEclyltPpXbgne+wOAf51f+06B3Y5CPY7S4DQSfeuCgYfs729/ZT7tUWKoQ0ZxzWNWKtMV+ZegQsydwPZuhJngRc9Bg0/+LuOlKXvwL0NBBFNHgpMLQp7jOWvKeC80KevW0pIRXtvWquFHyU4XbAGdxGKdpXrH996h6u4oCB9VJsqv978HhA36BE1drZD3NMDg1lJ2j+kSLursNgovc2I0IXPENiSkLv9Pzam6savzKBRt9eYsbOsNtLs2hgjvEKzVFCt2Un7IpzHPzMPo9RLiyNRR296V7ZX6n2PUV+nMUAW4P8/tlJB43aZypBgdqI+39m5rqNslZyEMBAzBpMSH2iUn73b3v7qWVSFkbuLBWcnmo3Hwrxy43hJ5QnUwSdiX73rsYwWMwIzJBtSPiV3hyaT5K1FHD8IpPcfCLpK9b7MHZx9EzIeWRT3tugT1HnvsBakDwbimbxqWegXQSYq3kcg1TcLR6/WZzorvZc2TstLhGZzTPYKL54ooHRu65Gvvt0FuqJMCnCq/wcj1JQS+fgkrPRPOnQtt4b7DJy3FI5OmX2L2RQZcEZ2smxMVrLl1z6ToCAyiABnDa6lWeD/Mi/vKZISNqk3/hL4b2x+yNjCMN9RKZX3HTKR4J2yEugkxhK7Macul2nuO8/XE0hxJsFPzvgtiCPk41SZ88R5h9jZfmaYx0dKcgJz2nsOYS3L+HpXUH08vwFrmMfewk9nmuoo2wIdqELKcgeJjztKoRYYsnL6awEt0C2mBdq3K/s8NC4XMo3Uh9QlHzJ2pFWXCwe73bZYjsixPeiua0IBQU/cnVzGp202ekp5jVUtYLnJUy1IPNFI49ysWEIVUveJ13en0UxIUcj2AoLkie+xZQsQJ5k8PmLF0dovDZ7VcxrUh6GSQ2jA/lzKF9KjcDy3AIc7mFJcTeWwyCxBEJmu8yEOxV4bhIlnz5+tdDq+STbltFGxAgXcrspwHptiQrjvE+mLTHc5G2oVo/H/NkqbmW3fuQxEbRHbb0Np/+zEP0VZ02YyOne7EaL53u1MsQGXCjupJjnmfRzWkp6xK3Ov3Dh37Uy1YQNnL7PQzLJ4Edc8s33QOqqkPITaSbosWwMySzs1hNlGondWHB9iWSdnap1i8nhPs4F5tM9KmTsmZxxLuIWydP+4V3SIiTDv7oBkAs5E5I18CxypSKGoFl3rlKOQb3EeTwm6/PVTgupNvjjX8mt55B6bk+mrJ+maVa0z8aOaTPHzcCyBfUQ8QyUKodZALHSTUjHQms9moSGzCQYqy4mFP6Xm08qwV/VAQAZwrzPwcg7OGMongmW5rdpcZK9a4zVu3OjiU2W+rscuo469wx0v13tpe7xenlnk9Sc+v9k7TNGV15eLTbOWDO2+tzBdZIt8gEVnL6XVwgtTLkNgoaEK5P8Jwy/gbi4mrEtdgD7Ew5ImAXmuf4jOIiPqjAn9fhm9y50cJDWD52mdl+hFyhENVSvinhYDvP4ZyCjYlWcWsOi/cPBup4gqKe454ZwZed7s3pAE1wSqagWEWy5UHncPpLqSIV10npRpxdMnu04qh06ZGKYDhauLJ+tPC2yJLVmf2r1a9PfCKLsgkZlLVrltcsr127vFZ57dOiol09EcAH56tERcED1cZXr8FVsejaVMUm7at9ysmVP/mQngtUvWilFmQT4ZXFn3muprfPJZety23eyy24sQZcaMtJQj4WruU5Uhkin70PiOETGJGn4lazWu6IIhaOF5BwluAFzwqV+pSLyJNx6xo+Eg6pOkVsEvetJ1iDDrjGlMslfW4tfxnsfelFGztU6/9FRbD0auT/RKctUmaUT/gU5VqiFvSB5zqT1PEwnjnhfVq22Kd/EnTVB8uESQfQ0Lio0ysNX4VWxuFPjrby3HW42y1mq570PINR/k7TnJQxusMntlW49pjXZRwh8bf1urfvOzWf7q5n2Rp6S9Ke4PYEopvKj94CIXVDA/y1BAZQhUsBe99XRqHCJIzeGKAa7E9jPvI4ljyFY204mbLgkMg+yCfoBTzLH2AhP1aF40+xSrhWkb/WMYExH88g+AJOe9TQxas4xpCh+dJz8gpjRvJO/wqS57hEi4YnZ4Zq/RePioYDAAAAAAABAAAAANIBJtoAAAAAyTUxiwAAAADTrheOeJxjYGRgYOABYjEgZmJgBEI/IGYB8xgABvgAfXicbZM7bxNBFEa/fTjENkqBAIXFQKSAlESxvXGMbYwU+U0eThNZVG4oaABFBNGlJX9ifwAVck3vjpJmKVJTTU3JcmYVmwgj6+jemfv45npm5UjKKdSe3N5gONLKu1cfTxXIZ19JIhu/7jtvX3841bL1Uny5qV2W471JMzc15vdZX/QdfjhLzjbsOT3sS7xPELk33cANnG33vfvNvXR/ej6suJfeKivWrEqe7434rXoj3VKQnKlI7zKEUNFtVZOJasmF6tCAZjJVC9rQYd3F9rB97AD2wdG6viqrQhJpDTZgC4r0LyWxyuSHUAGH3Yny8ohloEB8DdadHHUxdXFaVyYrBFuTVdbWQJBGp0QNUaMd1hXsLvjzXrM+9lzn7GfpkYd7zGg7WPUx6uOFiiKU6FXGhmnvqTLK/v6lPATMZBWtWiHtmkvPNet8ttiP/So6NWJ1aEATWnRqQwe/i+1h+9gBvfaxB9QewhEM4RgdD0XODgH6d1hFrKIr7QnaBm2DtkHboBujG6Mboxuja9A16Bp0Y3QNujG6Bl2DrtHdf/6ri4WJqijWoA4NaLL3931EV+8junofk/R9HJPjL5zP5RYMt2B0Y+4tzp3mcZYMWO8cz3J9MjuNnSRL/ITYyX9nn2Vl5lmzV2VndcBjd4kuOV5IoPvc8QM91CM91hNtEN/iPkt8LaF2+FZ2VdVT1dTQMz3nW2+prY666uuFDnSoIw3/ADokYlUAAHicY2BkYGDgYtBh0GNgcnHzCWHgy0ksyWOQYGABijP8/w8kECwgAACeygdreJxjYGYxZ5zAwMrAwTqL1ZiBgVEeQjNfZEhj/MjBxMTNxsbMysLExPKAgem9A4NCNAMDgwYQMxg6BjsDKQWGBWzy/0QYWjh6mSIUGBjng+RYPFi3AWUUGJgAmqEOPQAAeJxjYGBgZoBgGQZGBhDIAfIYwXwWhgAgLQCEIHklBi0GawZ7hiiGKoYF//8DRRQY1Bh0gCKODIkgkf8P/9/7f/f/rf83/1/+vw5qGgpgZGPAJoyqhglkGQsrGzsHAycXNw8vH7+AoJCwiKiYuARQQpJBSlpGVk5eQVFJWUVVTV1DU0tbR1dP38DQyBhigImpmbmFpZW1ja2dvYOjk7OLq5u7h6eXt48vAZtJBX5k6QIARwwiKwAAAHicY2BkYGBglJwl4L+JK57f5isDNwcDCFxeJzMBRv9P/CfC7sMmD+RyMDCBRAExkQrRAAB4nGNgZGDg6P27goGBvfB/4v8V7D4MQBEU4A8AmagGXnicLdA/S0JhFMfxr+eee69DQ4TQIBHi4NAQEQ0iOfUKJNoSChETIlSawtEXIA45NUR7d2qIcImGO4WI9BKkLRpa7Vc4fDjP+Ts8Dk3LgRUZBwcMwg86mTcGVqcmh97mJPND1UYcW4GxfZHzEU15kYbUZUcGcr3KW9LW/K1Ugyvy4TqEu6ThGv1wTuo9KSifKV+QWkWKyzP/VL1EGpdJo6xU6Pt0Fb/Va9D2Sza09+yvELfI+x1ZvwEfUtPdU1+QBO90FXvep2dPbPk5Jd1OLOLeouXQ9//fSdwh+av7XLMLHqUbHGl/yoXN2FbvwQ2iMpu+pxtZLJjob/Rnvx58S5IAAFAAAE8AAHicfZBBSsNAFIb/tGm1IEHEhasyayFJ04WL4qYtWQRKC0a6D8mQBkISMik5iIdwJ3gOL+AZ3HoB/6SDKIJ5zMw387/3v8wAsPACA91nYIJrzQOcwdE8xBSNZpM5z5pHuMCb5jHO8aHZwq0RsMowJzy56h06HlCZah7iHneaTeY8aR7hBq+ax7jEu2YLj/jEDhUkCgiEiLgqYFfJQoRRQXygluKInFrNrUyPeURYMi/u6xLONattjr9eAitWZ6xPyB5mDCxVLItE1sIW363E6pjlifBm1P//pX3fUNG07HM8PmpnjL2sVVYWwnO8Hya/LE4OBz59Q3kBl9H24TCt4oipSu5K9kip5uxzuqjirHiyQYA1fGxp7fPac2az36FpqoXrtm3rRFUUH6RT1qmbZ7yqksrdBGt/G/r23JnhC0hbWdsAAHicY2BmAIN/sxjSGLAAAC6BAgIA)format("woff");}',5);

sheet.insertRule('@media(max-width:767px){.border h2{border:none;}}',13);
</script>
<div class="<perch:content id="topclass" label="Top Class" help="Select if Heading has a border, no image, etc (top is default)." type="select" options="top,top border,top padding,top border padding,top border no_padding,top border overflow"/>">
<h2><perch:content id="heading2" type="hidden"/></h2>
</div>
</template>

<div id="top"></div>

<script>
var toptemplate = document.querySelector('#top_template');
var topclone = document.importNode(toptemplate.content,true);
var tophost = document.querySelector('#top');
tophost.appendChild(topclone);
</script>

<perch:help>Save to copy Website Title Level 2 Heading.</perch:help>

I tested this in all current browsers and found that while Edge, FF and Chrome allow the "host" element, i.e. <div id="top"></div> to be used for styling from within the template itself, IE does not.

At some point, I'd like to use the hosting element rather than have extra markup when IE is no longer supported however will Perch allow this?

Cheers

Garth Holmes

Garth Holmes 0 points

  • 4 years ago
Rachel Andrew

Rachel Andrew 394 points
Perch Support

Perch doesn't care what you want to do in your frontend markup, we just manage the content. You always have control over your templates.

Hi Rachel,

I have (re)moved all <template></template> tags and associated scripts to PHP and am only using Perch .html templates for Perch code and the odd <script></script> and it's performing well.

On a general development note, the only issue with using this new coding "paradigm" is IE has problems with styling the containing element; which I will test as I am using id="" and document.getElementById(); but maybe document.querySelector(); with a class="" will work instead.

Thanks again