1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"/> 5 <meta name="viewport" content="width=device-width, initial-scale=1"/> 6 <title>Angular + Custom Elements</title> 7 <link rel="icon" href="/images/favicon.ico"/> 8 <link rel="stylesheet" href="/styles/bundle.css"/> 9 <style type="text/css">html,body{font-family:Arial,sans-serif;font-size:1rem;margin:0;padding:0;}body{padding:10px 40px;}h1{margin-bottom:0;}h2{margin-top:0;margin-bottom:0;color:#999;}table{width:100%;margin-top:20px;margin-bottom:20px;table-layout:fixed;}tr.header{background:#ddd;font-weight:bold;border-bottom:none;}td{padding:7px;border-top:none;border-left:1px black solid;border-bottom:1px black solid;border-right:none;word-break:break-all;word-wrap:break-word;}tr.pass td{color:#003b07;background:#86e191;}tr.skip td{color:#7d3a00;background:#ffd24a;}tr.fail td{color:#5e0e00;background:#ff9c8a;}tr:first-child td{border-top:1px black solid;}td:last-child{border-right:1px black solid;}tr.overview{font-weight:bold;color:#777;}tr.overview td{padding-bottom:0px;border-bottom:none;}tr.system-out td{color:#777;}tr.system-errors td{color:#f00;}hr{height:2px;margin:30px 0;background:#000;border:none;}section{margin-top:40px;}h3{margin:6px 0;}.overview{color:#333;font-weight:bold;}.system-out{margin:0.4rem 0;}.system-errors{color:#a94442}.spec{padding:0.8rem;margin:0.3rem 0;}.spec--pass{color:#3c763d;background-color:#dff0d8;border:1px solid #d6e9c6;}.spec--skip{color:#8a6d3b;background-color:#fcf8e3;border:1px solid #faebcc;}.spec--fail{color:#a94442;background-color:#f2dede;border:1px solid #ebccd1;}.spec--group{color:#636363;background-color:#f0f0f0;border:1px solid #e6e6e6;margin:0;}.spec--group:not(:first-of-type){margin:20px 0 0 0;}.spec__title{display:inline;}.spec__suite{display:inline;}.spec__descrip{font-weight:normal;}.spec__status{float:right;}.spec__log{padding-left: 2.3rem;}.hidden{display:none;}body.compact .spec p{margin-top:0;margin-bottom:0.5rem;}body.compact .spec,body.compact tr,body.compact .overview,body.compact .system-out,body.compact .system-errors{font-size:0.85rem;}body.compact .spec{padding:0.3rem 0.5rem;}body.compact section{margin-top:30px;}</style> 10 <style type="text/css">body{padding:3rem 1.5rem}.overview{margin-bottom:1.5rem}.spec__header{font-weight:700;display:flex}.spec__title{flex:1;margin-right:16px}.spec__descrip,.spec__status{font-size:.95rem}.spec--pass{color:#1f4e20}.spec--fail{color:#6d2b2a}</style> 11
11<script type="text/javascript">
vendor: 379 bytes, lines 11-17
11 12 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 13 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 14 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 15 })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); 16 17 ga('create', '
17UA-105089944-1
vendor: 50 bytes, lines 17-19
17', 'auto'); 18 ga('send', 'pageview'); 19
19</script>
19 20 </head> 21 <body class="compact"> 22 <div class="container"> 23 <h1 class="title is-2">Angular + Custom Elements</h1> 24 <section> 25 <header class="overview"> 26 <div class="title is-6">Version: 16.2.10</div> 27 <div class="browser title is-6">Browser: Chrome Headless 138.0.0.0 (Linux x86_64)</div> 28 <div class="timestamp title is-6">Timestamp: 8/10/2025, 5:06:43 PM</div> 29 <p class="results title is-6"> 30 16 tests / 31 0 errors / 32 0 failures / 33 0 skipped / 34 runtime: 1.317s 35 </p> 36 </header> 37 <div class="spec spec--group"> 38 <h3 class="spec__header title is-6">basic support</h3> 39 </div> 40 <div class="spec spec--pass" style="margin-left:20px;"> 41 <h3 class="spec__header"> 42 <div class="spec__title"> 43 <p class="spec__suite">no children</p> 44 <em class="spec__descrip">can display a Custom Element with no children</em> 45 </div> 46 <div class="spec__status">Passed in 0.175s</div> 47 </h3> 48 </div> 49 <div class="spec spec--pass" style="margin-left:20px;"> 50 <h3 class="spec__header"> 51 <div class="spec__title"> 52 <p class="spec__suite">with children</p> 53 <em class="spec__descrip">can display a Custom Element with children in a Shadow Root</em> 54 </div> 55 <div class="spec__status">Passed in 0.022s</div> 56 </h3> 57 </div> 58 <div class="spec spec--pass" style="margin-left:20px;"> 59 <h3 class="spec__header"> 60 <div class="spec__title"> 61 <p class="spec__suite">with children</p> 62 <em class="spec__descrip">can display a Custom Element with children in a Shadow Root and pass in Light DOM children</em> 63 </div> 64 <div class="spec__status">Passed in 1.027s</div> 65 </h3> 66 </div> 67 <div class="spec spec--pass" style="margin-left:20px;"> 68 <h3 class="spec__header"> 69 <div class="spec__title"> 70 <p class="spec__suite">with children</p> 71 <em class="spec__descrip">can display a Custom Element with children in a Shadow Root and handle hiding and showing the element</em> 72 </div> 73 <div class="spec__status">Passed in 0.02s</div> 74 </h3> 75 </div> 76 <div class="spec spec--pass" style="margin-left:20px;"> 77 <h3 class="spec__header"> 78 <div class="spec__title"> 79 <p class="spec__suite">attributes and properties</p> 80 <em class="spec__descrip">will pass boolean data as either an attribute or a property</em> 81 </div> 82 <div class="spec__status">Passed in 0.005s</div> 83 </h3> 84 </div> 85 <div class="spec spec--pass" style="margin-left:20px;"> 86 <h3 class="spec__header"> 87 <div class="spec__title"> 88 <p class="spec__suite">attributes and properties</p> 89 <em class="spec__descrip">will pass numeric data as either an attribute or a property</em> 90 </div> 91 <div class="spec__status">Passed in 0.004s</div> 92 </h3> 93 </div> 94 <div class="spec spec--pass" style="margin-left:20px;"> 95 <h3 class="spec__header"> 96 <div class="spec__title"> 97 <p class="spec__suite">attributes and properties</p> 98 <em class="spec__descrip">will pass string data as either an attribute or a property</em> 99 </div> 100 <div class="spec__status">Passed in 0.002s</div> 101 </h3> 102 </div> 103 <div class="spec spec--pass" style="margin-left:20px;"> 104 <h3 class="spec__header"> 105 <div class="spec__title"> 106 <p class="spec__suite">events</p> 107 <em class="spec__descrip">can imperatively listen to a DOM event dispatched by a Custom Element</em> 108 </div> 109 <div class="spec__status">Passed in 0.011s</div> 110 </h3> 111 </div> 112 <div class="spec spec--group"> 113 <h3 class="spec__header title is-6">advanced support</h3> 114 </div> 115 <div class="spec spec--pass" style="margin-left:20px;"> 116 <h3 class="spec__header"> 117 <div class="spec__title"> 118 <p class="spec__suite">attributes and properties</p> 119 <em class="spec__descrip">will pass array data as a property</em> 120 </div> 121 <div class="spec__status">Passed in 0.006s</div> 122 </h3> 123 </div> 124 <div class="spec spec--pass" style="margin-left:20px;"> 125 <h3 class="spec__header"> 126 <div class="spec__title"> 127 <p class="spec__suite">attributes and properties</p> 128 <em class="spec__descrip">will pass object data as a property</em> 129 </div> 130 <div class="spec__status">Passed in 0.007s</div> 131 </h3> 132 </div> 133 <div class="spec spec--pass" style="margin-left:20px;"> 134 <h3 class="spec__header"> 135 <div class="spec__title"> 136 <p class="spec__suite">attributes and properties</p> 137 <em class="spec__descrip">will pass object data to a camelCase-named property</em> 138 </div> 139 <div class="spec__status">Passed in 0.002s</div> 140 </h3> 141 </div> 142 <div class="spec spec--pass" style="margin-left:20px;"> 143 <h3 class="spec__header"> 144 <div class="spec__title"> 145 <p class="spec__suite">events</p> 146 <em class="spec__descrip">can declaratively listen to a lowercase DOM event dispatched by a Custom Element</em> 147 </div> 148 <div class="spec__status">Passed in 0.011s</div> 149 </h3> 150 </div> 151 <div class="spec spec--pass" style="margin-left:20px;"> 152 <h3 class="spec__header"> 153 <div class="spec__title"> 154 <p class="spec__suite">events</p> 155 <em class="spec__descrip">can declaratively listen to a kebab-case DOM event dispatched by a Custom Element</em> 156 </div> 157 <div class="spec__status">Passed in 0.008s</div> 158 </h3> 159 </div> 160 <div class="spec spec--pass" style="margin-left:20px;"> 161 <h3 class="spec__header"> 162 <div class="spec__title"> 163 <p class="spec__suite">events</p> 164 <em class="spec__descrip">can declaratively listen to a camelCase DOM event dispatched by a Custom Element</em> 165 </div> 166 <div class="spec__status">Passed in 0.01s</div> 167 </h3> 168 </div> 169 <div class="spec spec--pass" style="margin-left:20px;"> 170 <h3 class="spec__header"> 171 <div class="spec__title"> 172 <p class="spec__suite">events</p> 173 <em class="spec__descrip">can declaratively listen to a CAPScase DOM event dispatched by a Custom Element</em> 174 </div> 175 <div class="spec__status">Passed in 0.005s</div> 176 </h3> 177 </div> 178 <div class="spec spec--pass" style="margin-left:20px;"> 179 <h3 class="spec__header"> 180 <div class="spec__title"> 181 <p class="spec__suite">events</p> 182 <em class="spec__descrip">can declaratively listen to a PascalCase DOM event dispatched by a Custom Element</em> 183 </div> 184 <div class="spec__status">Passed in 0.002s</div> 185 </h3> 186 </div> 187 <div class="system-out"><strong>System output:</strong><br />Chrome Headless 138.0.0.0 (Linux x86_64) WARN: 'NG0912: Component ID generation collision detected. Components 'ComponentWithoutChildren' and 'ComponentWithChildren' with selector 'ng-component' generated the same component ID. To fix this, you can change the selector of one of those components or add an extra host attribute to force a different ID. Find more at https://angular.io/errors/NG0912' 188</div> 189 </section> 190 <section> 191 <header class="overview"> 192 <div class="title is-6">Version: 16.2.10</div> 193 <div class="browser title is-6">Browser: FirefoxHeadless</div> 194 <div class="timestamp title is-6">Timestamp: 8/10/2025, 5:06:45 PM</div> 195 <p class="results title is-6"> 196 16 tests / 197 0 errors / 198 0 failures / 199 0 skipped / 200 runtime: 1.109s 201 </p> 202 </header> 203 <div class="spec spec--group"> 204 <h3 class="spec__header title is-6">basic support</h3> 205 </div> 206 <div class="spec spec--pass" style="margin-left:20px;"> 207 <h3 class="spec__header"> 208 <div class="spec__title"> 209 <p class="spec__suite">no children</p> 210 <em class="spec__descrip">can display a Custom Element with no children</em> 211 </div> 212 <div class="spec__status">Passed in 0.037s</div> 213 </h3> 214 </div> 215 <div class="spec spec--pass" style="margin-left:20px;"> 216 <h3 class="spec__header"> 217 <div class="spec__title"> 218 <p class="spec__suite">with children</p> 219 <em class="spec__descrip">can display a Custom Element with children in a Shadow Root</em> 220 </div> 221 <div class="spec__status">Passed in 0.007s</div> 222 </h3> 223 </div> 224 <div class="spec spec--pass" style="margin-left:20px;"> 225 <h3 class="spec__header"> 226 <div class="spec__title"> 227 <p class="spec__suite">with children</p> 228 <em class="spec__descrip">can display a Custom Element with children in a Shadow Root and pass in Light DOM children</em> 229 </div> 230 <div class="spec__status">Passed in 1.008s</div> 231 </h3> 232 </div> 233 <div class="spec spec--pass" style="margin-left:20px;"> 234 <h3 class="spec__header"> 235 <div class="spec__title"> 236 <p class="spec__suite">with children</p> 237 <em class="spec__descrip">can display a Custom Element with children in a Shadow Root and handle hiding and showing the element</em> 238 </div> 239 <div class="spec__status">Passed in 0.008s</div> 240 </h3> 241 </div> 242 <div class="spec spec--pass" style="margin-left:20px;"> 243 <h3 class="spec__header"> 244 <div class="spec__title"> 245 <p class="spec__suite">attributes and properties</p> 246 <em class="spec__descrip">will pass boolean data as either an attribute or a property</em> 247 </div> 248 <div class="spec__status">Passed in 0.004s</div> 249 </h3> 250 </div> 251 <div class="spec spec--pass" style="margin-left:20px;"> 252 <h3 class="spec__header"> 253 <div class="spec__title"> 254 <p class="spec__suite">attributes and properties</p> 255 <em class="spec__descrip">will pass numeric data as either an attribute or a property</em> 256 </div> 257 <div class="spec__status">Passed in 0.004s</div> 258 </h3> 259 </div> 260 <div class="spec spec--pass" style="margin-left:20px;"> 261 <h3 class="spec__header"> 262 <div class="spec__title"> 263 <p class="spec__suite">attributes and properties</p> 264 <em class="spec__descrip">will pass string data as either an attribute or a property</em> 265 </div> 266 <div class="spec__status">Passed in 0.004s</div> 267 </h3> 268 </div> 269 <div class="spec spec--pass" style="margin-left:20px;"> 270 <h3 class="spec__header"> 271 <div class="spec__title"> 272 <p class="spec__suite">events</p> 273 <em class="spec__descrip">can imperatively listen to a DOM event dispatched by a Custom Element</em> 274 </div> 275 <div class="spec__status">Passed in 0.006s</div> 276 </h3> 277 </div> 278 <div class="spec spec--group"> 279 <h3 class="spec__header title is-6">advanced support</h3> 280 </div> 281 <div class="spec spec--pass" style="margin-left:20px;"> 282 <h3 class="spec__header"> 283 <div class="spec__title"> 284 <p class="spec__suite">attributes and properties</p> 285 <em class="spec__descrip">will pass array data as a property</em> 286 </div> 287 <div class="spec__status">
287Passed in 0.003s</div> 288 </h3> 289 </div> 290 <div class="spec spec--pass" style="margin-left:20px;"> 291 <h3 class="spec__header"> 292 <div class="spec__title"> 293 <p class="spec__suite">attributes and properties</p> 294 <em class="spec__descrip">will pass object data as a property</em> 295 </div> 296 <div class="spec__status">Passed in 0.004s</div> 297 </h3> 298 </div> 299 <div class="spec spec--pass" style="margin-left:20px;"> 300 <h3 class="spec__header"> 301 <div class="spec__title"> 302 <p class="spec__suite">attributes and properties</p> 303 <em class="spec__descrip">will pass object data to a camelCase-named property</em> 304 </div> 305 <div class="spec__status">Passed in 0.004s</div> 306 </h3> 307 </div> 308 <div class="spec spec--pass" style="margin-left:20px;"> 309 <h3 class="spec__header"> 310 <div class="spec__title"> 311 <p class="spec__suite">events</p> 312 <em class="spec__descrip">can declaratively listen to a lowercase DOM event dispatched by a Custom Element</em> 313 </div> 314 <div class="spec__status">Passed in 0.004s</div> 315 </h3> 316 </div> 317 <div class="spec spec--pass" style="margin-left:20px;"> 318 <h3 class="spec__header"> 319 <div class="spec__title"> 320 <p class="spec__suite">events</p> 321 <em class="spec__descrip">can declaratively listen to a kebab-case DOM event dispatched by a Custom Element</em> 322 </div> 323 <div class="spec__status">Passed in 0.005s</div> 324 </h3> 325 </div> 326 <div class="spec spec--pass" style="margin-left:20px;"> 327 <h3 class="spec__header"> 328 <div class="spec__title"> 329 <p class="spec__suite">events</p> 330 <em class="spec__descrip">can declaratively listen to a camelCase DOM event dispatched by a Custom Element</em> 331 </div> 332 <div class="spec__status">Passed in 0.003s</div> 333 </h3> 334 </div> 335 <div class="spec spec--pass" style="margin-left:20px;"> 336 <h3 class="spec__header"> 337 <div class="spec__title"> 338 <p class="spec__suite">events</p> 339 <em class="spec__descrip">can declaratively listen to a CAPScase DOM event dispatched by a Custom Element</em> 340 </div> 341 <div class="spec__status">Passed in 0.004s</div> 342 </h3> 343 </div> 344 <div class="spec spec--pass" style="margin-left:20px;"> 345 <h3 class="spec__header"> 346 <div class="spec__title"> 347 <p class="spec__suite">events</p> 348 <em class="spec__descrip">can declaratively listen to a PascalCase DOM event dispatched by a Custom Element</em> 349 </div> 350 <div class="spec__status">Passed in 0.004s</div> 351 </h3> 352 </div> 353 <div class="system-out"><strong>System output:</strong><br />FirefoxHeadless WARN: 'NG0912: Component ID generation collision detected. Components 'ComponentWithoutChildren' and 'ComponentWithChildren' with selector 'ng-component' generated the same component ID. To fix this, you can change the selector of one of those components or add an extra host attribute to force a different ID. Find more at https://angular.io/errors/NG0912' 354</div> 355 </section> 356 </div> 357 </body> 358</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.