discontinued / server · Files

index.html 354 KB
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134 1135 1136 1137 1138 1139 1140 1141 1142 1143 1144 1145 1146 1147 1148 1149 1150 1151 1152 1153 1154 1155 1156 1157 1158 1159 1160 1161 1162 1163 1164 1165 1166 1167 1168 1169 1170 1171 1172 1173 1174 1175 1176 1177 1178 1179 1180 1181 1182 1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200 1201 1202 1203 1204 1205 1206 1207 1208 1209 1210 1211 1212 1213 1214 1215 1216 1217 1218 1219 1220 1221 1222 1223 1224 1225 1226 1227 1228 1229 1230 1231 1232 1233 1234 1235 1236 1237 1238 1239 1240 1241 1242 1243 1244 1245 1246 1247 1248 1249 1250 1251 1252 1253 1254 1255 1256 1257 1258 1259 1260 1261 1262 1263 1264 1265 1266 1267 1268 1269 1270 1271 1272 1273 1274 1275 1276 1277 1278 1279 1280 1281 1282 1283 1284 1285 1286 1287 1288 1289 1290 1291 1292 1293 1294 1295 1296 1297 1298 1299 1300 1301 1302 1303 1304 1305 1306 1307 1308 1309 1310 1311 1312 1313 1314 1315 1316 1317 1318 1319 1320 1321 1322 1323 1324 1325 1326 1327 1328 1329 1330 1331 1332 1333 1334 1335 1336 1337 1338 1339 1340 1341 1342 1343 1344 1345 1346 1347 1348 1349 1350 1351 1352 1353 1354 1355 1356 1357 1358 1359 1360 1361 1362 1363 1364 1365 1366 1367 1368 1369 1370 1371 1372 1373 1374 1375 1376 1377 1378 1379 1380 1381 1382 1383 1384 1385 1386 1387 1388 1389 1390 1391 1392 1393 1394 1395 1396 1397 1398 1399 1400 1401 1402 1403 1404 1405 1406 1407 1408 1409 1410 1411 1412 1413 1414 1415 1416 1417 1418 1419 1420 1421 1422 1423 1424 1425 1426 1427 1428 1429 1430 1431 1432 1433 1434 1435 1436 1437 1438 1439 1440 1441 1442 1443 1444 1445 1446 1447 1448 1449 1450 1451 1452 1453 1454 1455 1456 1457 1458 1459 1460 1461 1462 1463 1464 1465 1466 1467 1468 1469 1470 1471 1472 1473 1474 1475 1476 1477 1478 1479 1480 1481 1482 1483 1484 1485 1486 1487 1488 1489 1490 1491 1492 1493 1494 1495 1496 1497 1498 1499 1500 1501 1502 1503 1504 1505 1506 1507 1508 1509 1510 1511 1512 1513 1514 1515 1516 1517 1518 1519 1520 1521 1522 1523 1524 1525 1526 1527 1528 1529 1530 1531 1532 1533 1534 1535 1536 1537 1538 1539 1540 1541 1542 1543 1544 1545 1546 1547 1548 1549 1550 1551 1552 1553 1554 1555 1556 1557 1558 1559 1560 1561 1562 1563 1564 1565 1566 1567 1568 1569 1570 1571 1572 1573 1574 1575 1576 1577 1578 1579 1580 1581 1582 1583 1584 1585 1586 1587 1588 1589 1590 1591 1592 1593 1594 1595 1596 1597 1598 1599 1600 1601 1602 1603 1604 1605 1606 1607 1608 1609 1610 1611 1612 1613 1614 1615 1616 1617 1618 1619 1620 1621 1622 1623 1624 1625 1626 1627 1628 1629 1630 1631 1632 1633 1634 1635 1636 1637 1638 1639 1640 1641 1642 1643 1644 1645 1646 1647 1648 1649 1650 1651 1652 1653 1654 1655 1656 1657 1658 1659 1660 1661 1662 1663 1664 1665 1666 1667 1668 1669 1670 1671 1672 1673 1674 1675 1676 1677 1678 1679 1680 1681 1682 1683 1684 1685 1686 1687 1688 1689 1690 1691 1692 1693 1694 1695 1696 1697 1698 1699 1700 1701 1702 1703 1704 1705 1706 1707 1708 1709 1710 1711 1712 1713 1714 1715 1716 1717 1718 1719 1720 1721 1722 1723 1724 1725 1726 1727 1728 1729 1730 1731 1732 1733 1734 1735 1736 1737 1738 1739 1740 1741 1742 1743 1744 1745 1746 1747 1748 1749 1750 1751 1752 1753 1754 1755 1756 1757 1758 1759 1760 1761 1762 1763 1764 1765 1766 1767 1768 1769 1770 1771 1772 1773 1774 1775 1776 1777 1778 1779 1780 1781 1782 1783 1784 1785 1786 1787 1788 1789 1790 1791 1792 1793 1794 1795 1796 1797 1798 1799 1800 1801 1802 1803 1804 1805 1806 1807 1808 1809 1810 1811 1812 1813 1814 1815 1816 1817 1818 1819 1820 1821 1822 1823 1824 1825 1826 1827 1828 1829 1830 1831 1832 1833 1834 1835 1836 1837 1838 1839 1840 1841 1842 1843 1844 1845 1846 1847 1848 1849 1850 1851 1852 1853 1854 1855 1856 1857 1858 1859 1860 1861 1862 1863 1864 1865 1866 1867 1868 1869 1870 1871 1872 1873 1874 1875 1876 1877 1878 1879 1880 1881 1882 1883 1884 1885 1886 1887 1888 1889 1890 1891 1892 1893 1894 1895 1896 1897 1898 1899 1900 1901 1902 1903 1904 1905 1906 1907 1908 1909 1910 1911 1912 1913 1914 1915 1916 1917 1918 1919 1920 1921 1922 1923 1924 1925 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2027 2028 2029 2030 2031 2032 2033 2034 2035 2036 2037 2038 2039 2040 2041 2042 2043 2044 2045 2046 2047 2048 2049 2050 2051 2052 2053 2054 2055 2056 2057 2058 2059 2060 2061 2062 2063 2064 2065 2066 2067 2068 2069 2070 2071 2072 2073 2074 2075 2076 2077 2078 2079 2080 2081 2082 2083 2084 2085 2086 2087 2088 2089 2090 2091 2092 2093 2094 2095 2096 2097 2098 2099 2100 2101 2102 2103 2104 2105 2106 2107 2108 2109 2110 2111 2112 2113 2114 2115 2116 2117 2118 2119 2120 2121 2122 2123 2124 2125 2126 2127 2128 2129 2130 2131 2132 2133 2134 2135 2136 2137 2138 2139 2140 2141 2142 2143 2144 2145 2146 2147 2148 2149 2150 2151 2152 2153 2154 2155 2156 2157 2158 2159 2160 2161 2162 2163 2164 2165 2166 2167 2168 2169 2170 2171 2172 2173 2174 2175 2176 2177 2178 2179 2180 2181 2182 2183 2184 2185 2186 2187 2188 2189 2190 2191 2192 2193 2194 2195 2196 2197 2198 2199 2200 2201 2202 2203 2204 2205 2206 2207 2208 2209 2210 2211 2212 2213 2214 2215 2216 2217 2218 2219 2220 2221 2222 2223 2224 2225 2226 2227 2228 2229 2230 2231 2232 2233 2234 2235 2236 2237 2238 2239 2240 2241 2242 2243 2244 2245 2246 2247 2248 2249 2250 2251 2252 2253 2254 2255 2256 2257 2258 2259 2260 2261 2262 2263 2264 2265 2266 2267 2268 2269 2270 2271 2272 2273 2274 2275 2276 2277 2278 2279 2280 2281 2282 2283 2284 2285 2286 2287 2288 2289 2290 2291 2292 2293 2294 2295 2296 2297 2298 2299 2300 2301 2302 2303 2304 2305 2306 2307 2308 2309 2310 2311 2312 2313 2314 2315 2316 2317 2318 2319 2320 2321 2322 2323 2324 2325 2326 2327 2328 2329 2330 2331 2332 2333 2334 2335 2336 2337 2338 2339 2340 2341 2342 2343 2344 2345 2346 2347 2348 2349 2350 2351 2352 2353 2354 2355 2356 2357 2358 2359 2360 2361 2362 2363 2364 2365 2366 2367 2368 2369 2370 2371 2372 2373 2374 2375 2376 2377 2378 2379 2380 2381 2382 2383 2384 2385 2386 2387 2388 2389 2390 2391 2392 2393 2394 2395 2396 2397 2398 2399 2400 2401 2402 2403 2404 2405 2406 2407 2408 2409 2410 2411 2412 2413 2414 2415 2416 2417 2418 2419 2420 2421 2422 2423 2424 2425 2426 2427 2428 2429 2430 2431 2432 2433 2434 2435 2436 2437 2438 2439 2440 2441 2442 2443 2444 2445 2446 2447 2448 2449 2450 2451 2452 2453 2454 2455 2456 2457 2458 2459 2460 2461 2462 2463 2464 2465 2466 2467 2468 2469 2470 2471 2472 2473 2474 2475 2476 2477 2478 2479 2480 2481 2482 2483 2484 2485 2486 2487 2488 2489 2490 2491 2492 2493 2494 2495 2496 2497 2498 2499 2500 2501 2502 2503 2504 2505 2506 2507 2508 2509 2510 2511 2512 2513 2514 2515 2516 2517 2518 2519 2520 2521 2522 2523 2524 2525 2526 2527 2528 2529 2530 2531 2532 2533 2534 2535 2536 2537 2538 2539 2540 2541 2542 2543 2544 2545 2546 2547 2548 2549 2550 2551 2552 2553 2554 2555 2556 2557 2558 2559 2560 2561 2562 2563 2564 2565 2566 2567 2568 2569 2570 2571 2572 2573 2574 2575 2576 2577 2578 2579 2580 2581 2582 2583 2584 2585 2586 2587 2588 2589 2590 2591 2592 2593 2594 2595 2596 2597 2598 2599 2600 2601 2602 2603 2604 2605 2606 2607 2608 2609 2610 2611 2612 2613 2614 2615 2616 2617 2618 2619 2620 2621 2622 2623 2624 2625 2626 2627 2628 2629 2630 2631 2632 2633 2634 2635 2636 2637 2638 2639 2640 2641 2642 2643 2644 2645 2646 2647 2648 2649 2650 2651 2652 2653 2654 2655 2656 2657 2658 2659 2660 2661 2662 2663 2664 2665 2666 2667 2668 2669 2670 2671 2672 2673 2674 2675 2676 2677 2678 2679 2680 2681 2682 2683 2684 2685 2686 2687 2688 2689 2690 2691 2692 2693 2694 2695 2696 2697 2698 2699 2700 2701 2702 2703 2704 2705 2706 2707 2708 2709 2710 2711 2712 2713 2714 2715 2716 2717 2718 2719 2720 2721 2722 2723 2724 2725 2726 2727 2728 2729 2730 2731 2732 2733 2734 2735 2736 2737 2738 2739 2740 2741 2742 2743 2744 2745 2746 2747 2748 2749 2750 2751 2752 2753 2754 2755 2756 2757 2758 2759 2760 2761 2762 2763 2764 2765 2766 2767 2768 2769 2770 2771 2772 2773 2774 2775 2776 2777 2778 2779 2780 2781 2782 2783 2784 2785 2786 2787 2788 2789 2790 2791 2792 2793 2794 2795 2796 2797 2798 2799 2800 2801 2802 2803 2804 2805 2806 2807 2808 2809 2810 2811 2812 2813 2814 2815 2816 2817 2818 2819 2820 2821 2822 2823 2824 2825 2826 2827 2828 2829 2830 2831 2832 2833 2834 2835 2836 2837 2838 2839 2840 2841 2842 2843 2844 2845 2846 2847 2848 2849 2850 2851 2852 2853 2854 2855 2856 2857 2858 2859 2860 2861 2862 2863 2864 2865 2866 2867 2868 2869 2870 2871 2872 2873 2874 2875 2876 2877 2878 2879 2880 2881 2882 2883 2884 2885 2886 2887 2888 2889 2890 2891 2892 2893 2894 2895 2896 2897 2898 2899 2900 2901 2902 2903 2904 2905 2906 2907 2908 2909 2910 2911 2912 2913 2914 2915 2916 2917 2918 2919 2920 2921 2922 2923 2924 2925 2926 2927 2928 2929 2930 2931 2932 2933 2934 2935 2936 2937 2938 2939 2940 2941 2942 2943 2944 2945 2946 2947 2948 2949 2950 2951 2952 2953 2954 2955 2956 2957 2958 2959 2960 2961 2962 2963 2964 2965 2966 2967 2968 2969 2970 2971 2972 2973 2974 2975 2976 2977 2978 2979 2980 2981 2982 2983 2984 2985 2986 2987 2988 2989 2990 2991 2992 2993 2994 2995 2996 2997 2998 2999 3000 3001 3002 3003 3004 3005 3006 3007 3008 3009 3010 3011 3012 3013 3014 3015 3016 3017 3018 3019 3020 3021 3022 3023 3024 3025 3026 3027 3028 3029 3030 3031 3032 3033 3034 3035 3036 3037 3038 3039 3040 3041 3042 3043 3044 3045 3046 3047 3048 3049 3050 3051 3052 3053 3054 3055 3056 3057 3058 3059 3060 3061 3062 3063 3064 3065 3066 3067 3068 3069 3070 3071 3072 3073 3074 3075 3076 3077 3078 3079 3080 3081 3082 3083 3084 3085 3086 3087 3088 3089 3090 3091 3092 3093 3094 3095 3096 3097 3098 3099 3100 3101 3102 3103 3104 3105 3106 3107 3108 3109 3110 3111 3112 3113 3114 3115 3116 3117 3118 3119 3120 3121 3122 3123 3124 3125 3126 3127 3128 3129 3130 3131 3132 3133 3134 3135 3136 3137 3138 3139 3140 3141 3142 3143 3144 3145 3146 3147 3148 3149 3150 3151 3152 3153 3154 3155 3156 3157 3158 3159 3160 3161 3162 3163 3164 3165 3166 3167 3168 3169 3170 3171 3172 3173 3174 3175 3176 3177 3178 3179 3180 3181 3182 3183 3184 3185 3186 3187 3188 3189 3190 3191 3192 3193 3194 3195 3196 3197 3198 3199 3200 3201 3202 3203 3204 3205 3206 3207 3208 3209 3210 3211 3212 3213 3214 3215 3216 3217 3218 3219 3220 3221 3222 3223 3224 3225 3226 3227 3228 3229 3230 3231 3232 3233 3234 3235 3236 3237 3238 3239 3240 3241 3242 3243 3244 3245 3246 3247 3248 3249 3250 3251 3252 3253 3254 3255 3256 3257 3258 3259 3260 3261 3262 3263 3264 3265 3266 3267 3268 3269 3270 3271 3272 3273 3274 3275 3276 3277 3278 3279 3280 3281 3282 3283 3284 3285 3286 3287 3288 3289 3290 3291 3292 3293 3294 3295 3296 3297 3298 3299 3300 3301 3302 3303 3304 3305 3306 3307 3308 3309 3310 3311 3312 3313 3314 3315 3316 3317 3318 3319 3320 3321 3322 3323 3324 3325 3326 3327 3328 3329 3330 3331 3332 3333 3334 3335 3336 3337 3338 3339 3340 3341 3342 3343 3344 3345 3346 3347 3348 3349 3350 3351 3352 3353 3354 3355 3356 3357 3358 3359 3360 3361 3362 3363 3364 3365 3366 3367 3368 3369 3370 3371 3372 3373 3374 3375 3376 3377 3378 3379 3380 3381 3382 3383 3384 3385 3386 3387 3388 3389 3390 3391 3392 3393 3394 3395 3396 3397 3398 3399 3400 3401 3402 3403 3404 3405 3406 3407 3408 3409 3410 3411 3412 3413 3414 3415 3416 3417 3418 3419 3420 3421 3422 3423 3424 3425 3426 3427 3428 3429 3430 3431 3432 3433 3434 3435 3436 3437 3438 3439 3440 3441 3442 3443 3444 3445 3446 3447 3448 3449 3450 3451 3452 3453 3454 3455 3456 3457 3458 3459 3460 3461 3462 3463 3464 3465 3466 3467 3468 3469 3470 3471 3472 3473 3474 3475 3476 3477 3478 3479 3480 3481 3482 3483 3484 3485 3486 3487 3488 3489 3490 3491 3492 3493 3494 3495 3496 3497 3498 3499 3500 3501 3502 3503 3504 3505 3506 3507 3508 3509 3510 3511 3512 3513 3514 3515 3516 3517 3518 3519 3520 3521 3522 3523 3524 3525 3526 3527 3528 3529 3530 3531 3532 3533 3534 3535 3536 3537 3538 3539 3540 3541 3542 3543 3544 3545 3546 3547 3548 3549 3550 3551 3552 3553 3554 3555 3556 3557 3558 3559 3560 3561 3562 3563 3564 3565 3566 3567 3568 3569 3570 3571 3572 3573 3574 3575 3576 3577 3578 3579 3580 3581 3582 3583 3584 3585 3586 3587 3588 3589 3590 3591 3592 3593 3594 3595 3596 3597 3598 3599 3600 3601 3602 3603 3604 3605 3606 3607 3608 3609 3610 3611 3612 3613 3614 3615 3616 3617 3618 3619 3620 3621 3622 3623 3624 3625 3626 3627 3628 3629 3630 3631 3632 3633 3634 3635 3636 3637 3638 3639 3640 3641 3642 3643 3644 3645 3646 3647 3648 3649 3650 3651 3652 3653 3654 3655 3656 3657 3658 3659 3660 3661 3662 3663 3664 3665 3666 3667 3668 3669 3670 3671 3672 3673 3674 3675 3676 3677 3678 3679 3680 3681 3682 3683 3684 3685 3686 3687 3688 3689 3690 3691 3692 3693 3694 3695 3696 3697 3698 3699 3700 3701 3702 3703 3704 3705 3706 3707 3708 3709 3710 3711 3712 3713 3714 3715 3716 3717 3718 3719 3720 3721 3722 3723 3724 3725 3726 3727 3728 3729 3730 3731 3732 3733 3734 3735 3736 3737 3738 3739 3740 3741 3742 3743 3744 3745 3746 3747 3748 3749 3750 3751 3752 3753 3754 3755 3756 3757 3758 3759 3760 3761 3762 3763 3764 3765 3766 3767 3768 3769 3770 3771 3772 3773 3774 3775 3776 3777 3778 3779 3780 3781 3782 3783 3784 3785 3786 3787 3788 3789 3790 3791 3792 3793 3794 3795 3796 3797 3798 3799 3800 3801 3802 3803 3804 3805 3806 3807 3808 3809 3810 3811 3812 3813 3814 3815 3816 3817 3818 3819 3820 3821 3822 3823 3824 3825 3826 3827 3828 3829 3830 3831 3832 3833 3834 3835 3836 3837 3838 3839 3840 3841 3842 3843 3844 3845 3846 3847 3848 3849 3850 3851 3852 3853 3854 3855 3856 3857 3858 3859 3860 3861 3862 3863 3864 3865 3866 3867 3868 3869 3870 3871 3872 3873 3874 3875 3876 3877 3878 3879 3880 3881 3882 3883 3884 3885 3886 3887 3888 3889 3890 3891 3892 3893 3894 3895 3896 3897 3898 3899 3900 3901 3902 3903 3904 3905 3906 3907 3908 3909 3910 3911 3912 3913 3914 3915 3916 3917 3918 3919 3920 3921 3922 3923 3924 3925 3926 3927 3928 3929 3930 3931 3932 3933 3934 3935 3936 3937 3938 3939 3940 3941 3942 3943 3944 3945 3946 3947 3948 3949 3950 3951 3952 3953 3954 3955 3956 3957 3958 3959 3960 3961 3962 3963 3964 3965 3966 3967 3968 3969 3970 3971 3972 3973 3974 3975 3976 3977 3978 3979 3980 3981 3982 3983 3984 3985 3986 3987 3988 3989 3990 3991 3992 3993 3994 3995 3996 3997 3998 3999 4000 4001 4002 4003 4004 4005 4006 4007 4008 4009 4010 4011 4012 4013 4014 4015 4016 4017 4018 4019 4020 4021 4022 4023 4024 4025 4026 4027 4028 4029 4030 4031 4032 4033 4034 4035 4036 4037 4038 4039 4040 4041 4042 4043 4044 4045 4046 4047 4048 4049 4050 4051 4052 4053 4054 4055 4056 4057 4058 4059 4060 4061 4062 4063 4064 4065 4066 4067 4068 4069 4070 4071 4072 4073 4074 4075 4076 4077 4078 4079 4080 4081 4082 4083 4084 4085 4086 4087 4088 4089 4090 4091 4092 4093 4094 4095 4096 4097 4098 4099 4100 4101 4102 4103 4104 4105 4106 4107 4108 4109 4110 4111 4112 4113 4114 4115 4116 4117 4118 4119 4120 4121 4122 4123 4124 4125 4126 4127 4128 4129 4130 4131 4132 4133 4134 4135 4136 4137 4138 4139 4140 4141 4142 4143 4144 4145 4146 4147 4148 4149 4150 4151 4152 4153 4154 4155 4156 4157 4158 4159 4160 4161 4162 4163 4164 4165 4166 4167 4168 4169 4170 4171 4172 4173 4174 4175 4176 4177 4178 4179 4180 4181 4182 4183 4184 4185 4186 4187 4188 4189 4190 4191 4192 4193 4194 4195 4196 4197 4198 4199 4200 4201 4202 4203 4204 4205 4206 4207 4208 4209 4210 4211 4212 4213 4214 4215 4216 4217 4218 4219 4220 4221 4222 4223 4224 4225 4226 4227 4228 4229 4230 4231 4232 4233 4234 4235 4236 4237 4238 4239 4240 4241 4242 4243 4244 4245 4246 4247 4248 4249 4250 4251 4252 4253 4254 4255 4256 4257 4258 4259 4260 4261 4262 4263 4264 4265 4266 4267 4268 4269 4270 4271 4272 4273 4274 4275 4276 4277 4278 4279 4280 4281 4282 4283 4284 4285 4286 4287 4288 4289 4290 4291 4292 4293 4294 4295 4296 4297 4298 4299 4300 4301 4302 4303 4304 4305 4306 4307 4308 4309 4310 4311 4312 4313 4314 4315 4316 4317 4318 4319 4320 4321 4322 4323 4324 4325 4326 4327 4328 4329 4330 4331 4332 4333 4334 4335 4336 4337 4338 4339 4340 4341 4342 4343 4344 4345 4346 4347 4348 4349 4350 4351 4352 4353 4354 4355 4356 4357 4358 4359 4360 4361 4362 4363 4364 4365 4366 4367 4368 4369 4370 4371 4372 4373 4374 4375 4376 4377 4378 4379 4380 4381 4382 4383 4384 4385 4386 4387 4388 4389 4390 4391 4392 4393 4394 4395 4396 4397 4398 4399 4400 4401 4402 4403 4404 4405 4406 4407 4408 4409 4410 4411 4412 4413 4414 4415 4416 4417 4418 4419 4420 4421 4422 4423 4424 4425 4426 4427 4428 4429 4430 4431 4432 4433 4434 4435 4436 4437 4438 4439 4440 4441 4442 4443 4444 4445 4446 4447 4448 4449 4450 4451 4452 4453 4454 4455 4456 4457 4458 4459 4460 4461 4462 4463 4464 4465 4466 4467 4468 4469 4470 4471 4472 4473 4474 4475 4476 4477 4478 4479 4480 4481 4482 4483 4484 4485 4486 4487 4488 4489 4490 4491 4492 4493 4494 4495 4496 4497 4498 4499 4500 4501 4502 4503 4504 4505 4506 4507 4508 4509 4510 4511 4512 4513 4514 4515 4516 4517 4518 4519 4520 4521 4522 4523 4524 4525 4526 4527 4528 4529 4530 4531 4532 4533 4534 4535 4536 4537 4538 4539 4540 4541 4542 4543 4544 4545 4546 4547 4548 4549 4550 4551 4552 4553 4554 4555 4556 4557 4558 4559 4560 4561 4562 4563 4564 4565 4566 4567 4568 4569 4570 4571 4572 4573 4574 4575 4576 4577 4578 4579 4580 4581 4582 4583 4584 4585 4586 4587 4588 4589 4590 4591 4592 4593 4594 4595 4596 4597 4598 4599 4600 4601 4602 4603 4604 4605 4606 4607 4608 4609 4610 4611 4612 4613 4614 4615 4616 4617 4618 4619 4620 4621 4622 4623 4624 4625 4626 4627 4628 4629 4630 4631 4632 4633 4634 4635 4636 4637 4638 4639 4640 4641 4642 4643 4644 4645 4646 4647 4648 4649 4650 4651 4652 4653 4654 4655 4656 4657 4658 4659 4660 4661 4662 4663 4664 4665 4666 4667 4668 4669 4670 4671 4672 4673 4674 4675 4676 4677 4678 4679 4680 4681 4682 4683 4684 4685 4686 4687 4688 4689 4690 4691 4692 4693 4694 4695 4696 4697 4698 4699 4700 4701 4702 4703 4704 4705 4706 4707 4708 4709 4710 4711 4712 4713 4714 4715 4716 4717 4718 4719 4720 4721 4722 4723 4724 4725 4726 4727 4728 4729 4730 4731 4732 4733 4734 4735 4736 4737 4738 4739 4740 4741 4742 4743 4744 4745 4746 4747 4748 4749 4750 4751 4752 4753 4754 4755 4756 4757 4758 4759 4760 4761 4762 4763 4764 4765 4766 4767 4768 4769 4770 4771 4772 4773 4774 4775 4776 4777 4778 4779 4780 4781 4782 4783 4784 4785 4786 4787 4788 4789 4790 4791 4792 4793 4794 4795 4796 4797 4798 4799 4800 4801 4802 4803 4804 4805 4806 4807 4808 4809 4810 4811 4812 4813 4814 4815 4816 4817 4818 4819 4820 4821 4822 4823 4824 4825 4826 4827 4828 4829 4830 4831 4832 4833 4834 4835 4836 4837 4838 4839 4840 4841 4842 4843 4844 4845 4846 4847 4848 4849 4850 4851 4852 4853 4854 4855 4856 4857 4858 4859 4860 4861 4862 4863 4864 4865 4866 4867 4868 4869 4870 4871 4872 4873 4874 4875 4876 4877 4878 4879 4880 4881 4882 4883 4884 4885 4886 4887 4888 4889 4890 4891 4892 4893 4894 4895 4896 4897 4898 4899 4900 4901 4902 4903 4904 4905 4906 4907 4908 4909 4910 4911 4912 4913 4914 4915 4916 4917 4918 4919 4920 4921 4922 4923 4924 4925 4926 4927 4928 4929 4930 4931 4932 4933 4934 4935 4936 4937 4938 4939 4940 4941 4942 4943 4944 4945 4946 4947 4948 4949 4950 4951 4952 4953 4954 4955 4956 4957 4958 4959 4960 4961 4962 4963 4964 4965 4966 4967 4968 4969 4970 4971 4972 4973 4974 4975 4976 4977 4978 4979 4980 4981 4982 4983 4984 4985 4986 4987 4988 4989 4990 4991 4992 4993 4994 4995 4996 4997 4998 4999 5000 5001 5002 5003 5004 5005 5006 5007 5008 5009 5010 5011 5012 5013 5014 5015 5016 5017 5018 5019 5020 5021 5022 5023 5024 5025 5026 5027 5028 5029 5030 5031 5032 5033 5034 5035 5036 5037 5038 5039 5040 5041 5042 5043 5044 5045 5046 5047 5048 5049 5050 5051 5052 5053 5054 5055 5056 5057 5058 5059 5060 5061 5062 5063 5064 5065 5066 5067 5068 5069 5070 5071 5072 5073 5074 5075 5076 5077 5078 5079 5080 5081 5082 5083 5084 5085 5086 5087 5088 5089 5090 5091 5092 5093 5094 5095 5096 5097 5098 5099 5100 5101 5102 5103 5104 5105 5106 5107 5108 5109 5110 5111 5112 5113 5114 5115 5116 5117 5118 5119 5120 5121 5122 5123 5124 5125 5126 5127 5128 5129 5130 5131 5132 5133 5134 5135 5136 5137 5138 5139 5140 5141 5142 5143 5144 5145 5146 5147 5148 5149 5150 5151 5152 5153 5154 5155 5156 5157 5158 5159 5160 5161 5162 5163 5164 5165 5166 5167 5168 5169 5170 5171 5172 5173 5174 5175 5176 5177 5178 5179 5180 5181 5182 5183 5184 5185 5186 5187 5188 5189 5190 5191 5192 5193 5194 5195 5196 5197 5198 5199 5200 5201 5202 5203 5204 5205 5206 5207 5208 5209 5210 5211 5212 5213 5214 5215 5216 5217 5218 5219 5220 5221 5222 5223 5224 5225 5226 5227 5228 5229 5230 5231 5232 5233 5234 5235 5236 5237 5238 5239 5240 5241 5242 5243 5244 5245 5246 5247 5248 5249 5250 5251 5252 5253 5254 5255 5256 5257 5258 5259 5260 5261 5262 5263 5264 5265 5266 5267 5268 5269 5270 5271 5272 5273 5274 5275 5276 5277 5278 5279 5280 5281 5282 5283 5284 5285 5286 5287 5288 5289 5290 5291 5292 5293 5294 5295 5296 5297 5298 5299 5300 5301 5302 5303 5304 5305 5306 5307 5308 5309 5310 5311 5312 5313 5314 5315 5316 5317 5318 5319 5320 5321 5322 5323 5324 5325 5326 5327 5328 5329 5330 5331 5332 5333 5334 5335 5336 5337 5338 5339 5340 5341 5342 5343 5344 5345 5346 5347 5348 5349 5350 5351 5352 5353 5354 5355 5356 5357 5358 5359 5360 5361 5362 5363 5364 5365 5366 5367 5368 5369 5370 5371 5372 5373 5374 5375 5376 5377 5378 5379 5380 5381 5382 5383 5384 5385 5386 5387 5388 5389 5390 5391 5392 5393 5394 5395 5396 5397 5398 5399 5400 5401 5402 5403 5404 5405 5406 5407 5408 5409 5410 5411 5412 5413 5414 5415 5416 5417 5418 5419 5420 5421 5422 5423 5424 5425 5426 5427 5428 5429 5430 5431 5432 5433 5434 5435 5436 5437 5438 5439 5440 5441 5442 5443 5444 5445 5446 5447 5448 5449 5450 5451 5452 5453 5454 5455 5456 5457 5458 5459 5460 5461 5462 5463 5464 5465 5466 5467 5468 5469 5470 5471 5472 5473 5474 5475 5476 5477 5478 5479 5480 5481 5482 5483 5484 5485 5486 5487 5488 5489 5490 5491 5492 5493 5494 5495 5496 5497 5498 5499 5500 5501 5502 5503 5504 5505 5506 5507 5508 5509 5510 5511 5512 5513 5514 5515 5516 5517 5518 5519 5520 5521 5522 5523 5524 5525 5526 5527 5528 5529 5530 5531 5532 5533 5534 5535 5536 5537 5538 5539 5540 5541 5542 5543 5544 5545 5546 5547 5548 5549 5550 5551 5552 5553 5554 5555 5556 5557 5558 5559 5560 5561 5562 5563 5564 5565 5566 5567 5568 5569 5570 5571 5572 5573 5574 5575 5576 5577 5578 5579 5580 5581 5582 5583 5584 5585 5586 5587 5588 5589 5590 5591 5592 5593 5594 5595 5596 5597 5598 5599 5600 5601 5602 5603 5604 5605 5606 5607 5608 5609 5610 5611 5612 5613 5614 5615 5616 5617 5618 5619 5620 5621 5622 5623 5624 5625 5626 5627 5628 5629 5630 5631 5632 5633 5634 5635 5636 5637 5638 5639 5640 5641 5642 5643 5644 5645 5646 5647 5648 5649 5650 5651 5652 5653 5654 5655 5656 5657 5658 5659 5660 5661 5662 5663 5664 5665 5666 5667 5668 5669 5670 5671 5672 5673 5674 5675 5676 5677 5678 5679 5680 5681 5682 5683 5684 5685 5686 5687 5688 5689 5690 5691 5692 5693 5694 5695 5696 5697 5698 5699 5700 5701 5702 5703 5704 5705 5706 5707 5708 5709 5710 5711 5712 5713 5714 5715 5716 5717 5718 5719 5720 5721 5722 5723 5724 5725 5726 5727 5728 5729 5730 5731 5732 5733 5734 5735 5736 5737 5738 5739 5740 5741 5742 5743 5744 5745 5746 5747 5748 5749 5750 5751 5752 5753 5754 5755 5756 5757 5758 5759 5760 5761 5762 5763 5764 5765 5766 5767 5768 5769 5770 5771 5772 5773 5774 5775 5776 5777 5778 5779 5780 5781 5782 5783 5784 5785 5786 5787 5788 5789 5790 5791 5792 5793 5794 5795 5796 5797 5798 5799 5800 5801 5802 5803 5804 5805 5806 5807 5808 5809 5810 5811 5812 5813 5814 5815 5816 5817 5818 5819 5820 5821 5822 5823 5824 5825 5826 5827 5828 5829 5830 5831 5832 5833 5834 5835 5836 5837 5838 5839 5840 5841 5842 5843 5844 5845 5846 5847 5848 5849 5850 5851 5852 5853 5854 5855 5856 5857 5858 5859 5860 5861 5862 5863 5864 5865 5866 5867 5868 5869 5870 5871 5872 5873 5874 5875 5876 5877 5878 5879 5880 5881 5882 5883 5884 5885 5886 5887 5888 5889 5890 5891 5892 5893 5894 5895 5896 5897 5898 5899 5900 5901 5902 5903 5904 5905 5906 5907 5908 5909 5910 5911 5912 5913 5914 5915 5916 5917 5918 5919 5920 5921 5922 5923 5924 5925 5926 5927 5928 5929 5930 5931 5932 5933 5934 5935 5936 5937 5938 5939 5940 5941 5942 5943 5944 5945 5946 5947 5948 5949 5950 5951 5952 5953 5954 5955 5956 5957 5958 5959 5960 5961 5962 5963 5964 5965 5966 5967 5968 5969 5970 5971 5972 5973 5974 5975 5976 5977 5978 5979 5980 5981 5982 5983 5984 5985 5986 5987 5988 5989 5990 5991 5992 5993 5994 5995 5996 5997 5998 5999 6000 6001 6002 6003 6004 6005 6006 6007 6008 6009 6010 6011 6012 6013 6014 6015 6016 6017 6018 6019 6020 6021 6022 6023 6024 6025 6026 6027 6028 6029 6030 6031 6032 6033 6034 6035 6036 6037 6038 6039 6040 6041 6042 6043 6044 6045 6046 6047 6048 6049 6050 6051 6052 6053 6054 6055 6056 6057 6058 6059 6060 6061 6062 6063 6064 6065 6066 6067 6068 6069 6070 6071 6072 6073 6074 6075 6076 6077 6078 6079 6080 6081 6082 6083 6084 6085 6086 6087 6088 6089 6090 6091 6092 6093 6094 6095 6096 6097 6098 6099 6100 6101 6102 6103 6104 6105 6106 6107 6108 6109 6110 6111 6112 6113 6114 6115 6116 6117 6118 6119 6120 6121 6122 6123 6124 6125 6126 6127 6128 6129 6130 6131 6132 6133 6134 6135 6136 6137 6138 6139 6140 6141 6142 6143 6144 6145 6146 6147 6148 6149 6150 6151 6152 6153 6154 6155 6156 6157 6158 6159 6160 6161 6162 6163 6164 6165 6166 6167 6168 6169 6170 6171 6172 6173 6174 6175 6176 6177 6178 6179 6180 6181 6182 6183 6184 6185 6186 6187 6188 6189 6190 6191 6192 6193 6194 6195 6196 6197 6198 6199 6200 6201 6202 6203 6204 6205 6206 6207 6208 6209 6210 6211 6212 6213 6214 6215 6216 6217 6218 6219 6220 6221 6222 6223 6224 6225 6226 6227 6228 6229 6230 6231 6232 6233 6234 6235 6236 6237 6238 6239 6240 6241 6242 6243 6244 6245 6246 6247 6248 6249 6250 6251 6252 6253 6254 6255 6256 6257 6258 6259 6260 6261 6262 6263 6264 6265 6266 6267 6268 6269 6270 6271 6272 6273 6274 6275 6276 6277 6278 6279 6280 6281 6282 6283 6284 6285 6286 6287 6288 6289 6290 6291 6292 6293 6294 6295 6296 6297 6298 6299 6300 6301 6302 6303 6304 6305 6306 6307 6308 6309 6310 6311 6312 6313 6314 6315 6316 6317 6318 6319 6320 6321 6322 6323 6324 6325 6326 6327 6328 6329 6330 6331 6332 6333 6334 6335 6336 6337 6338 6339 6340 6341 6342 6343 6344 6345 6346 6347 6348 6349 6350 6351 6352 6353 6354 6355 6356 6357 6358 6359 6360 6361 6362 6363 6364 6365 6366 6367 6368 6369 6370 6371 6372 6373 6374 6375 6376 6377 6378 6379 6380 6381 6382 6383 6384 6385 6386 6387 6388 6389 6390 6391 6392 6393 6394 6395 6396 6397 6398 6399 6400 6401 6402 6403 6404 6405 6406 6407 6408 6409 6410 6411 6412 6413 6414 6415 6416 6417 6418 6419 6420 6421 6422 6423 6424 6425 6426 6427 6428 6429 6430 6431 6432 6433 6434 6435 6436 6437 6438 6439 6440 6441 6442 6443 6444 6445 6446 6447 6448 6449 6450 6451 6452 6453 6454 6455 6456 6457 6458 6459 6460 6461 6462 6463 6464 6465 6466 6467 6468 6469 6470 6471 6472 6473 6474 6475 6476 6477 6478 6479 6480 6481 6482 6483 6484 6485 6486 6487 6488 6489 6490 6491 6492 6493 6494 6495 6496 6497 6498 6499 6500 6501 6502 6503 6504 6505 6506 6507 6508 6509 6510 6511 6512 6513 6514 6515 6516 6517 6518 6519 6520 6521 6522 6523 6524 6525 6526 6527 6528 6529 6530 6531 6532 6533 6534 6535 6536 6537 6538 6539 6540 6541 6542 6543 6544 6545 6546 6547 6548 6549 6550 6551 6552 6553 6554 6555 6556 6557 6558 6559 6560 6561 6562 6563 6564 6565 6566 6567 6568 6569 6570 6571 6572 6573 6574 6575 6576 6577 6578 6579 6580 6581 6582 6583 6584 6585 6586 6587 6588 6589 6590 6591 6592 6593 6594 6595 6596 6597 6598 6599 6600 6601 6602 6603 6604 6605 6606 6607 6608 6609 6610 6611 6612 6613 6614 6615 6616 6617 6618 6619 6620 6621 6622 6623 6624 6625 6626 6627 6628 6629 6630 6631 6632 6633 6634 6635 6636 6637 6638 6639 6640 6641 6642 6643 6644 6645 6646 6647 6648 6649 6650 6651 6652 6653 6654 6655 6656 6657 6658 6659 6660 6661 6662 6663 6664 6665 6666 6667 6668 6669 6670 6671 6672 6673 6674 6675 6676 6677 6678 6679 6680 6681 6682 6683 6684 6685 6686 6687 6688 6689 6690 6691 6692 6693 6694 6695 6696 6697 6698 6699 6700 6701 6702 6703 6704 6705 6706 6707 6708 6709 6710 6711 6712 6713 6714 6715 6716 6717 6718 6719 6720 6721 6722 6723 6724 6725 6726 6727 6728 6729 6730 6731 6732 6733 6734 6735 6736 6737 6738 6739 6740 6741 6742 6743 6744 6745 6746 6747 6748 6749 6750 6751 6752 6753 6754 6755 6756 6757 6758 6759 6760 6761 6762 6763 6764 6765 6766 6767 6768 6769 6770 6771 6772 6773 6774 6775 6776 6777 6778 6779 6780 6781 6782 6783 6784 6785 6786 6787 6788 6789 6790 6791 6792 6793 6794 6795 6796 6797 6798 6799 6800 6801 6802 6803 6804 6805 6806 6807 6808 6809 6810 6811 6812 6813 6814 6815 6816 6817 6818 6819 6820 6821 6822 6823 6824 6825 6826 6827 6828 6829 6830 6831 6832 6833 6834 6835 6836 6837 6838 6839 6840 6841 6842 6843 6844 6845 6846 6847 6848 6849 6850 6851 6852 6853 6854 6855 6856 6857 6858 6859 6860 6861 6862 6863 6864 6865 6866 6867 6868 6869 6870 6871 6872 6873 6874 6875 6876 6877 6878 6879 6880 6881 6882 6883 6884 6885 6886 6887 6888 6889 6890 6891 6892 6893 6894 6895 6896 6897 6898 6899 6900 6901 6902 6903 6904 6905 6906 6907 6908 6909 6910 6911 6912 6913 6914 6915 6916 6917 6918 6919 6920 6921 6922 6923 6924 6925 6926 6927 6928 6929 6930 6931 6932 6933 6934 6935 6936 6937 6938 6939 6940 6941 6942 6943 6944 6945 6946 6947 6948 6949 6950 6951 6952 6953 6954 6955 6956 6957 6958 6959 6960 6961 6962 6963 6964 6965 6966 6967 6968 6969 6970 6971 6972 6973 6974 6975 6976 6977 6978 6979 6980 6981 6982 6983 6984 6985 6986 6987 6988 6989 6990 6991 6992 6993 6994 6995 6996 6997 6998 6999 7000 7001 7002 7003 7004 7005 7006 7007 7008 7009 7010 7011 7012 7013 7014 7015 7016 7017 7018 7019 7020 7021 7022 7023 7024 7025 7026 7027 7028 7029 7030 7031 7032 7033 7034 7035 7036 7037 7038 7039 7040 7041 7042 7043 7044 7045 7046 7047 7048 7049 7050 7051 7052 7053 7054 7055 7056 7057 7058 7059 7060 7061 7062 7063 7064 7065 7066 7067 7068 7069 7070 7071 7072 7073 7074 7075 7076 7077 7078 7079 7080 7081 7082 7083 7084 7085 7086 7087 7088 7089 7090 7091 7092 7093 7094 7095 7096 7097 7098 7099 7100 7101 7102 7103 7104 7105 7106 7107 7108 7109 7110 7111 7112 7113 7114 7115 7116 7117 7118 7119 7120 7121 7122 7123 7124 7125 7126 7127 7128 7129 7130 7131 7132 7133 7134 7135 7136 7137 7138 7139 7140 7141 7142 7143 7144 7145 7146 7147 7148 7149 7150 7151 7152 7153 7154 7155 7156 7157 7158 7159 7160 7161 7162 7163 7164 7165 7166 7167 7168 7169 7170 7171 7172 7173 7174 7175 7176 7177 7178 7179 7180 7181 7182 7183 7184 7185 7186 7187 7188 7189 7190 7191 7192 7193 7194 7195 7196 7197 7198 7199 7200 7201 7202 7203 7204 7205 7206 7207 7208 7209 7210 7211 7212 7213 7214 7215 7216 7217 7218 7219 7220 7221 7222 7223 7224 7225 7226 7227 7228 7229 7230 7231 7232 7233 7234 7235 7236 7237 7238 7239 7240 7241 7242 7243 7244 7245 7246 7247 7248 7249 7250 7251 7252 7253 7254 7255 7256 7257 7258 7259 7260 7261 7262 7263 7264 7265 7266 7267 7268 7269 7270 7271 7272 7273 7274 7275 7276 7277 7278 7279 7280 7281 7282 7283 7284 7285 7286 7287 7288 7289 7290 7291 7292 7293 7294 7295 7296 7297 7298 7299 7300 7301 7302 7303 7304 7305 7306 7307 7308 7309 7310 7311 7312 7313 7314 7315 7316 7317 7318 7319 7320 7321 7322 7323 7324 7325 7326 7327 7328 7329 7330 7331 7332 7333 7334 7335 7336 7337 7338 7339 7340 7341 7342 7343 7344 7345 7346 7347 7348 7349 7350 7351 7352 7353 7354 7355 7356 7357 7358 7359 7360 7361 7362 7363 7364 7365 7366 7367 7368 7369 7370 7371 7372 7373 7374 7375 7376 7377 7378 7379 7380 7381 7382 7383 7384 7385 7386 7387 7388 7389 7390 7391 7392 7393 7394 7395 7396 7397 7398 7399 7400 7401 7402 7403 7404 7405 7406 7407 7408 7409 7410 7411 7412 7413 7414 7415 7416 7417 7418 7419 7420 7421 7422 7423 7424 7425 7426 7427 7428 7429 7430 7431 7432 7433 7434 7435 7436 7437 7438 7439 7440 7441 7442 7443 7444 7445 7446 7447 7448 7449 7450 7451 7452 7453 7454 7455 7456 7457 7458 7459 7460 7461 7462 7463 7464 7465 7466 7467 7468 7469 7470 7471 7472 7473 7474 7475 7476 7477 7478 7479 7480 7481 7482 7483 7484 7485 7486 7487 7488 7489 7490 7491 7492 7493 7494 7495 7496 7497 7498 7499 7500 7501 7502 7503 7504 7505 7506 7507 7508 7509 7510 7511 7512 7513 7514 7515 7516 7517 7518 7519 7520 7521 7522 7523 7524 7525 7526 7527 7528 7529 7530 7531 7532 7533 7534 7535 7536 7537 7538 7539 7540 7541 7542 7543 7544 7545 7546 7547 7548 7549 7550 7551 7552 7553 7554 7555 7556 7557 7558 7559 7560 7561 7562 7563 7564 7565 7566 7567 7568 7569 7570 7571 7572 7573 7574 7575 7576 7577 7578 7579 7580 7581 7582 7583 7584 7585 7586 7587 7588 7589 7590 7591 7592 7593 7594 7595 7596 7597 7598 7599 7600 7601 7602 7603 7604 7605 7606 7607 7608 7609 7610 7611 7612 7613 7614 7615 7616 7617 7618 7619 7620 7621 7622 7623 7624 7625 7626 7627 7628 7629 7630 7631 7632 7633 7634 7635 7636 7637 7638 7639 7640 7641 7642 7643 7644 7645 7646 7647 7648 7649 7650 7651 7652 7653 7654 7655 7656 7657 7658 7659 7660 7661 7662 7663 7664 7665 7666 7667 7668 7669 7670 7671 7672 7673 7674 7675 7676 7677 7678 7679 7680 7681 7682 7683 7684 7685 7686 7687 7688 7689 7690 7691 7692 7693 7694 7695 7696 7697 7698 7699 7700 7701 7702 7703 7704 7705 7706 7707 7708 7709 7710 7711 7712 7713 7714 7715 7716 7717 7718 7719 7720 7721 7722 7723 7724 7725 7726 7727 7728 7729 7730 7731 7732 7733 7734 7735 7736 7737 7738 7739 7740 7741 7742 7743 7744 7745 7746 7747 7748 7749 7750 7751 7752 7753 7754 7755 7756 7757 7758 7759 7760 7761 7762 7763 7764 7765 7766 7767 7768 7769 7770 7771 7772 7773 7774 7775 7776 7777 7778 7779 7780 7781 7782 7783 7784 7785 7786 7787 7788 7789 7790 7791 7792 7793 7794 7795 7796 7797 7798 7799 7800 7801 7802 7803 7804 7805 7806 7807 7808 7809 7810 7811 7812 7813 7814 7815 7816 7817 7818 7819 7820 7821 7822 7823 7824 7825 7826 7827 7828 7829 7830 7831 7832 7833 7834 7835 7836 7837 7838 7839 7840 7841 7842 7843 7844 7845 7846 7847 7848 7849 7850 7851 7852 7853 7854 7855 7856 7857 7858 7859 7860 7861 7862 7863 7864 7865 7866 7867 7868 7869 7870 7871 7872 7873 7874 7875 7876 7877 7878 7879 7880 7881 7882 7883 7884 7885 7886 7887 7888 7889 7890 7891 7892 7893 7894 7895 7896 7897 7898 7899 7900 7901 7902 7903 7904 7905 7906 7907 7908 7909 7910 7911 7912 7913 7914 7915 7916 7917 7918 7919 7920 7921 7922 7923 7924 7925 7926 7927 7928 7929 7930 7931 7932 7933 7934 7935 7936 7937 7938 7939 7940 7941 7942 7943 7944 7945 7946 7947 7948 7949 7950 7951 7952 7953 7954 7955 7956 7957 7958 7959 7960 7961 7962 7963 7964 7965 7966 7967 7968 7969 7970 7971 7972 7973 7974 7975 7976 7977 7978 7979 7980 7981 7982 7983 7984 7985 7986 7987 7988 7989 7990 7991 7992 7993 7994 7995 7996 7997 7998 7999 8000 8001 8002 8003 8004 8005 8006 8007 8008 8009 8010 8011 8012 8013 8014 8015 8016 8017 8018 8019 8020 8021 8022 8023 8024 8025 8026 8027 8028 8029 8030 8031 8032 8033 8034 8035 8036 8037 8038 8039 8040 8041 8042 8043 8044 8045 8046 8047 8048 8049 8050 8051 8052 8053 8054 8055 8056 8057 8058 8059 8060 8061 8062 8063 8064 8065 8066 8067 8068 8069 8070 8071 8072 8073 8074 8075 8076 8077 8078 8079 8080 8081 8082 8083 8084 8085 8086 8087 8088 8089 8090 8091 8092 8093 8094 8095 8096 8097 8098 8099 8100 8101 8102 8103 8104 8105 8106 8107 8108 8109 8110 8111 8112 8113 8114 8115 8116 8117 8118 8119 8120 8121 8122 8123 8124 8125 8126 8127 8128 8129 8130 8131 8132 8133 8134 8135 8136 8137 8138 8139 8140 8141 8142 8143 8144 8145 8146 8147 8148 8149 8150 8151 8152 8153 8154 8155 8156 8157 8158 8159 8160 8161 8162 8163 8164 8165 8166 8167 8168 8169 8170 8171 8172 8173 8174 8175 8176 8177 8178 8179 8180 8181 8182 8183 8184 8185 8186 8187 8188 8189 8190 8191 8192 8193 8194 8195 8196 8197 8198 8199 8200 8201 8202 8203 8204 8205 8206 8207 8208 8209 8210 8211 8212 8213 8214 8215 8216 8217 8218 8219 8220 8221 8222 8223 8224 8225 8226 8227 8228 8229 8230 8231 8232 8233 8234 8235 8236 8237 8238 8239 8240 8241 8242 8243 8244 8245 8246 8247 8248 8249 8250 8251 8252 8253 8254 8255 8256 8257 8258 8259 8260 8261 8262 8263 8264 8265 8266 8267 8268 8269 8270 8271 8272 8273 8274 8275 8276 8277 8278 8279 8280 8281 8282 8283 8284 8285 8286 8287 8288 8289 8290 8291 8292 8293 8294 8295 8296 8297 8298 8299 8300 8301 8302 8303 8304 8305 8306 8307 8308 8309 8310 8311 8312 8313 8314 8315 8316 8317 8318 8319 8320 8321 8322 8323 8324 8325 8326 8327 8328 8329 8330 8331 8332 8333 8334 8335 8336 8337 8338 8339 8340 8341 8342 8343 8344 8345 8346 8347 8348 8349 8350 8351 8352 8353 8354 8355 8356 8357 8358 8359 8360 8361 8362 8363 8364 8365 8366 8367 8368 8369 8370 8371 8372 8373 8374 8375 8376 8377 8378 8379 8380 8381 8382 8383 8384 8385 8386 8387 8388 8389 8390 8391 8392 8393 8394 8395 8396 8397 8398 8399 8400 8401 8402 8403 8404 8405 8406 8407 8408 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html lang=en-US>
 <head>
  <title>XML Binding Language (XBL) 2.0</title>

  <style type="text/css">
   dt, dfn { font-weight: bold; font-style: normal; }
   .main h4 { margin: 1.5em 0 0.75em 0; }
   .main p { margin: 1em 0; }
   .main dl, .main dd { margin-top: 0; margin-bottom: 0; }
   .main dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   .main dd dt { margin-top: 0.25em; margin-bottom: 0; }
   .main dd p { margin-top: 0; }
   .main p + * > li, .main dd li { margin: 1em 0; }
   img.extra { float: right; }
   body ins, body del { display: block; }
   body * ins, body * del { display: inline; }
   pre, code { color: black; background: transparent; font-size: inherit; font-family: monospace; }
   pre strong { color: purple; background: transparent; font: inherit; font-weight: bold; }
   pre em { color: teal; background: transparent; font-weight: bolder; font-style: normal; }
   pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
   pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em; }
   table { border-collapse: collapse; border-style: hidden hidden none hidden; }
   table thead { border-bottom: solid; }
   table tbody th:first-child { border-left: solid; }
   table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
   table td > ul:first-child:last-child { margin: 0; padding: 0; }
   table td > ul:first-child:last-child li { margin: 0; padding: 0; list-style-position: inside; }
   ul.toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
   ul.toc li ul { margin-bottom: 0.75em; }
   ul.toc li ul li ul { margin-bottom: 0.25em; }
   var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
   @media screen { code { color: rgb(255, 69, 0); background: transparent; } }
   code :link, code :visited { color: inherit; background: transparent; }
   .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin: 1em 0 1em 1em; padding-left: 1em; }
   .issue, .big-issue { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
   .issue > :first-child, .big-issue > :first-child { margin-top: 0; }
   p .big-issue { line-height: 3em; }
   .note { color: green; background: transparent; }
   .note { font-family: sans-serif; }
   p.note:before { content: 'Note: '; }
   .warning { color: red; background: transparent; }
   .warning:before { font-style: normal; }
   p.warning:before { content: '\26A0 Warning! '; }
   .note, .warning { font-weight: bolder; font-style: italic; padding: 0.5em 2em; }
   .copyright { margin: 0.25em 0; }
  </style>
  <link href="http://www.w3.org/StyleSheets/TR/W3C-CR" rel=stylesheet
  type="text/css">

 <body>
  <div class=head>
   <p><a href="http://www.w3.org/"><img alt=W3C height=48
    src="http://www.w3.org/Icons/w3c_home" width=72></a></p>

   <h1 id=xml-binding>XML Binding Language (XBL) 2.0</h1>

   <h2 class="no-num no-toc" id=w3c-candidate>W3C Candidate Recommendation 16
    March 2007</h2>

   <dl>
    <dt>This Version:

    <dd><a
     href="http://www.w3.org/TR/2007/CR-xbl-20070316/">http://www.w3.org/TR/2007/CR-xbl-20070316/</a>

    <dt>Latest Version:

    <dd><a href="http://www.w3.org/TR/xbl/">http://www.w3.org/TR/xbl/</a>

    <dt>Previous Versions:

    <dd><a
     href="http://www.w3.org/TR/2007/WD-xbl-20070117/">http://www.w3.org/TR/2007/WD-xbl-20070117/</a>

    <dd><a
     href="http://www.w3.org/TR/2006/WD-xbl-20060907/">http://www.w3.org/TR/2006/WD-xbl-20060907/</a>

    <dd><a
     href="http://www.w3.org/TR/2006/WD-xbl-20060619/">http://www.w3.org/TR/2006/WD-xbl-20060619/</a>

    <dd><a
     href="http://www.mozilla.org/projects/xbl/xbl.html">http://www.mozilla.org/projects/xbl/xbl.html</a>

    <dd><a
     href="http://www.w3.org/TR/2001/NOTE-xbl-20010223/">http://www.w3.org/TR/2001/NOTE-xbl-20010223/</a>

    <dt>Editor:

    <dd><a href="mailto:ian@hixie.ch">Ian Hickson</a>, Google, Inc.
   </dl>

   <p class=copyright><a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a>
    &#169; 2006, 2007 <a href="http://www.w3.org/"><acronym title="World Wide
    Web Consortium">W3C</acronym></a><sup>&#174;</sup> (<a
    href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
    of Technology">MIT</acronym></a>, <a
    href="http://www.ercim.org/"><acronym title="European Research Consortium
    for Informatics and Mathematics">ERCIM</acronym></a>, <a
    href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
    <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
    and <a
    href="http://www.w3.org/Consortium/Legal/copyright-documents">document
    use</a> rules apply.</p>

   <p class="alt copyright">The <a
    href="http://www.mozilla.org/projects/xbl/xbl2.html">Mozilla version</a>
    of this specification is available under a Creative Commons Attribution
    Share-alike license.</p>
  </div>

  <hr>

  <div class=main>
   <h2 class="no-num no-toc" id=abstract>Abstract</h2>

   <p>The XML Binding Language (XBL) describes the ability to associate
    elements in a document with script, event handlers, CSS, and more complex
    content models, which can be stored in another document. This can be used
    to re-order and wrap content so that, for instance, simple HTML or XHTML
    markup can have complex CSS styles applied without requiring that the
    markup be polluted with multiple semantically neutral <code
    title="">div</code> elements.</p>

   <p>It can also be used to implement new DOM interfaces, and, in
    conjunction with other specifications, enables arbitrary tag sets to be
    implemented as widgets. For example, XBL could be used to implement the
    form controls in XForms or HTML.</p>

   <h2 class="no-num no-toc" id=status>Status of this document</h2>

   <p><em>This section describes the status of this document at the time of
    its publication. Other documents may supersede this document. A list of
    current W3C publications and the latest revision of this technical report
    can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
    index</a> at http://www.w3.org/TR/.</em></p>
   <!-- required boilerplate -->
   <!-- next few paragraphs give three required items: what this spec
  is, where to send comments, whether the spec is unstable, and the
  list of changes; wording is flexible -->
   <!-- LC:
  <p>This is the 15 March 2007 Last Call Working Draft of XBL 2.0. The last
  call for comments resulted in a number of process clarifications,
  and changes to various method and attribute names. This working
  draft is intended to allow commentors on the previous draft to
  verify their changes were correctly made before the specification
  advances to Candidate Recommendation. The deadline for Last Call
  comments is the 7 February 2007, after which time this draft
  will progress to Candidate Recommendation stage unless major issues
  have been found.</p>
  -->
   <!-- CR: -->
   <p>This is the 16 March 2007 Candidate Recommendation of XBL 2.0.
    Implementations are encouraged. This specification will remain at the
    Candidate Recommendation stage until two complete and interoperable
    implementations exist (and not before 1 September 2007). An
    implementation will only be considered if it is publicly downloadable or
    available through some other public point of sale mechanism, and is
    intended for a wide audience and could be used on a daily basis. To be
    "complete and interoperable", an implementation must pass every test in a
    comprehensive test suite of every normative requirement of this
    specification.</p>

   <p>Publication as a Candidate Recommendation does not imply endorsement by
    the W3C Membership. At the time of publication, there was no
    implementation report. A future version of this specification, which will
    include fixes based on implementation feedback, will include a link to a
    test suite and an implementation report.</p>

   <p>If you wish to make comments regarding this document, please send them
    to <a href="mailto:dev-tech-xbl@mozilla.org">dev-tech-xbl@mozilla.org</a>
    (<a href="https://lists.mozilla.org/listinfo/dev-tech-xbl">subscribe</a>,
    <a
    href="http://groups.google.com/group/mozilla.dev.tech.xbl">archives</a>)
    or <a href="mailto:public-appformats@w3.org">public-appformats@w3.org</a>
    (<a
    href="mailto:public-appformats-request@w3.org?subject=subscribe">subscribe</a>,
    <a
    href="http://lists.w3.org/Archives/Public/public-appformats/">archives</a>).
    All feedback is welcome. The editor guarantees that all feedback sent to
    the above lists will receive responses before this specification advances
    to the next stage of the W3C process.</p>

   <p>The editor's copy of this specification is <a
    href="http://dev.w3.org/cvsweb/~checkout~/2006/xbl2/Overview.html?content-type=text/html">available
    in W3C CVS</a>. A <a href="http://dev.w3.org/cvsweb/2006/xbl2/">detailed
    list of changes</a> is available from the CVS server.</p>
   <!-- next four paragraphs describe the history; optional -->
   <p>This specification is a (non-backwards-compatible) revision of
    Mozilla's XBL 1.0 language, originally developed at Netscape in 2000, and
    originally implemented in the Gecko rendering engine. <a
    href="#refsXBL10">[XBL10]</a></p>

   <p>This specification was developed by the Mozilla Foundation and its
    contributors, in conjunction with individuals from Opera Software ASA,
    Google, Inc, and Apple Computer, Inc, to address problems found in the
    original language and to allow for implementation in a broader range of
    Web browsers.</p>

   <p>This document is also based, in part, on work done in the W3C's
    Bindings Task Force. However, no text from that collaboration, other than
    that written by the aforementioned contributors, remains in this
    specification. Inspiration was similarly taken from other efforts, such
    as HTML Components. <a href="#refsHTC">[HTC]</a></p>

   <p>Although they have had related histories, this specification is
    separate from the W3C's "sXBL" drafts, and is not compatible with them.
    (The two efforts use different namespaces, for one.)</p>
   <!-- next two paragraphs are legal things and w3c process -->
   <p>While the body of this specification was created outside the W3C, the
    W3C <a href="http://www.w3.org/2006/appformats/">Web Application Formats
    Working Group</a> is now guiding this specification along the W3C
    Recommendation track.</p>
   <!-- this statement is required
  but the wording doesn't matter -->
   <p>This document was produced by a group operating under the <a
    href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
    2004 W3C Patent Policy</a>. W3C maintains a <a
    href="http://www.w3.org/2004/01/pp-impl/38483/status"
    rel=disclosure>public list of any patent disclosures</a> made in
    connection with the deliverables of the group; that page also includes
    instructions for disclosing a patent. An individual who has actual
    knowledge of a patent which the individual believes contains <a
    href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
    Claim(s)</a> must disclose the information in accordance with <a
    href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
    6 of the W3C Patent Policy</a>.</p>
   <!-- required boilerplate -->
   <h3 class="no-num no-toc" id=feedback>Feedback requests</h3>

   <p>While feedback is welcomed on all aspects of this specification,
    especially from implementors and authors using XBL on the Web, feedback
    is especially requested on two contentious issues.</p>

   <p>The first concerns ID attributes. This specification defines an
    attribute <code title=attr-id><a href="#id13">id</a></code> for uniquely
    identifying elements in XBL. There exists a specification for a global <a
    href="http://www.w3.org/TR/xml-id/"><code title="">xml:id</code></a>
    attribute, which can also be used with XBL. Feedback is requested from
    implementors and authors using XBL on the Web regarding whether XBL
    should instead require that authors use the <code title="">xml:id</code>
    attribute, and forbid the use of the <code title=attr-id><a
    href="#id13">id</a></code> attribute on XBL elements.</p>

   <p>The second contentious issue regards an intentional limitation: unless
    an element is explicitly bound to a binding that provides access to its
    shadow tree or its bound element, there is no easy way to get access to
    them from script running outside the element's bindings. This is a
    feature that may be introduced in a future version, but it is not clear
    how much need there is for it.</p>

   <p>If you have any opinions or experience regarding these issues or any
    others, please send them to <a
    href="mailto:dev-tech-xbl@mozilla.org">dev-tech-xbl@mozilla.org</a> (<a
    href="https://lists.mozilla.org/listinfo/dev-tech-xbl">subscribe</a>, <a
    href="http://groups.google.com/group/mozilla.dev.tech.xbl">archives</a>)
    or <a href="mailto:public-appformats@w3.org">public-appformats@w3.org</a>
    (<a
    href="mailto:public-appformats-request@w3.org?subject=subscribe">subscribe</a>,
    <a
    href="http://lists.w3.org/Archives/Public/public-appformats/">archives</a>).</p>

   <h2 class="no-num no-toc" id=table>Table of Contents</h2>
   <!--begin-toc-->
   <ul class=toc>
    <li><a href="#introduction"><span class=secno>1. </span>Introduction</a>
     <ul class=toc>
      <li><a href="#relationship"><span class=secno>1.1. </span>Relationship
       to XBL1</a>

      <li><a href="#relationship0"><span class=secno>1.2. </span>Relationship
       to XSLT</a>

      <li><a href="#terminology"><span class=secno>1.3. </span>Terminology
       and Conventions</a>

      <li><a href="#conformance"><span class=secno>1.4.
       </span>Conformance</a>
       <ul class=toc>
        <li><a href="#error"><span class=secno>1.4.1. </span>Error
         Handling</a>

        <li><a href="#attributes"><span class=secno>1.4.2. </span><dfn
         id=attributes17 title=selector>Attributes Containing
         Selectors</dfn></a>

        <li><a href="#attributes0"><span class=secno>1.4.3. </span><dfn
         id=attributes18 title=space-separated>Attributes Containing
         Space-Separated Values</dfn></a>

        <li><a href="#attributes1"><span class=secno>1.4.4. </span><dfn
         id=attributes19 title="valid MIME type">Attributes Containing MIME
         Types</dfn></a>

        <li><a href="#attributes2"><span class=secno>1.4.5. </span><dfn
         id=attributes20 title=URI>Attributes Containing URIs</dfn></a>

        <li><a href="#attributes3"><span class=secno>1.4.6. </span>Attributes
         Containing Keywords</a>

        <li><a href="#extension"><span class=secno>1.4.7. </span>Extension
         Mechanisms</a>

        <li><a href="#feature"><span class=secno>1.4.8. </span>Feature
         Strings for the DOM and SVG</a>
       </ul>

      <li><a href="#security"><span class=secno>1.5. </span>Security
       Concerns</a>
     </ul>

    <li><a href="#xbl-elements"><span class=secno>2. </span>XBL Elements</a>
     <ul class=toc>
      <li><a href="#the-xbl"><span class=secno>2.1. </span>The <dfn
       id=xbl><code>xbl</code></dfn> Element</a>

      <li><a href="#the-binding"><span class=secno>2.2. </span>The <dfn
       id=binding7><code>binding</code></dfn> Element</a>

      <li><a href="#the-implementation"><span class=secno>2.3. </span>The
       <dfn id=implementation><code>implementation</code></dfn> Element</a>

      <li><a href="#the-template"><span class=secno>2.4. </span>The <dfn
       id=template><code>template</code></dfn> Element</a>

      <li><a href="#the-content"><span class=secno>2.5. </span>The <dfn
       id=content><code>content</code></dfn> Element</a>

      <li><a href="#the-inherited"><span class=secno>2.6. </span>The <dfn
       id=inherited><code>inherited</code></dfn> Element</a>

      <li><a href="#the-xblattr"><span class=secno>2.7. </span>The <dfn
       id=xblattr title=attr-attr><code>xbl:attr</code></dfn> Attribute</a>

      <li><a href="#the-xblpseudo"><span class=secno>2.8. </span>The <dfn
       id=xblpseudo title=attr-pseudo><code>xbl:pseudo</code></dfn>
       Attribute</a>

      <li><a href="#the-div"><span class=secno>2.9. </span>The <dfn
       id=div><code>div</code></dfn> Element</a>

      <li><a href="#the-handlers"><span class=secno>2.10. </span>The <dfn
       id=handlers><code>handlers</code></dfn> Element</a>

      <li><a href="#the-handler"><span class=secno>2.11. </span>The <dfn
       id=handler><code>handler</code></dfn> Element</a>

      <li><a href="#the-resources"><span class=secno>2.12. </span>The <dfn
       id=resources0><code>resources</code></dfn> Element</a>

      <li><a href="#the-style"><span class=secno>2.13. </span>The <dfn
       id=style0><code>style</code></dfn> Element</a>

      <li><a href="#the-prefetch"><span class=secno>2.14. </span>The <dfn
       id=prefetch><code>prefetch</code></dfn> Element</a>

      <li><a href="#the-script"><span class=secno>2.15. </span>The <dfn
       id=script0><code>script</code></dfn> Element</a>

      <li><a href="#the-id"><span class=secno>2.16. </span>The <dfn id=id
       title=attr-id><code>id</code></dfn> Attribute of XBL Elements</a>
     </ul>

    <li><a href="#binding"><span class=secno>3. </span><dfn
     id=binding8>Binding Attachment and Detachment</dfn></a>
     <ul class=toc>
      <li><a href="#the-bindings-are-ready"><span class=secno>3.1.
       </span><dfn id=the-bindings-are-ready0>The Bindings-Are-Ready
       State</dfn></a>

      <li><a href="#attachment"><span class=secno>3.2. </span><dfn
       id=attachment3 title="attachment using binding">Attachment using <code
       title=binding>&lt;binding element=""&gt;</code></dfn></a>
       <ul class=toc>
        <li><a href="#importing"><span class=secno>3.2.1. </span><dfn
         id=importing0 title=import>Importing Binding Documents</dfn></a>
       </ul>

      <li><a href="#attachment0"><span class=secno>3.3. </span>Attachment
       using CSS</a>
       <ul class=toc>
        <li><a href="#the-binding0"><span class=secno>3.3.1. </span>The
         '<code title="binding property">binding</code>' Property</a>

        <li><a href="#processing"><span class=secno>3.3.2. </span>Processing
         Model</a>

        <li><a href="#examples"><span class=secno>3.3.3. </span>Examples</a>
       </ul>

      <li><a href="#attachment1"><span class=secno>3.4. </span>Attachment
       using the DOM</a>

      <li><a href="#binding0"><span class=secno>3.5. </span><dfn
       id=binding9>Binding Attachment Model</dfn></a>

      <li><a href="#handling"><span class=secno>3.6. </span><dfn
       id=handling1>Handling Insertion and Removal from the
       Document</dfn></a>

      <li><a href="#binding1"><span class=secno>3.7. </span><dfn
       id=binding10>Binding Inheritance</dfn></a>
       <ul class=toc>
        <li><a href="#explicit"><span class=secno>3.7.1. </span><dfn
         id=explicit0>Explicit Inheritance</dfn></a>

        <li><a href="#implicit"><span class=secno>3.7.2. </span><dfn
         id=implicit0>Implicit Inheritance</dfn></a>

        <li><a href="#mixing"><span class=secno>3.7.3. </span>Mixing Implicit
         and Explicit Inheritance</a>
       </ul>

      <li><a href="#views"><span class=secno>3.8. </span>Views and
       Attachment</a>

      <li><a href="#attachment2"><span class=secno>3.9. </span>Attachment
       During Document Load</a>

      <li><a href="#binding2"><span class=secno>3.10. </span><dfn
       id=binding11>Binding Detachment Model</dfn></a>
     </ul>

    <li><a href="#shadow"><span class=secno>4. </span><dfn id=shadow3>Shadow
     Content</dfn></a>
     <ul class=toc>
      <li><a href="#rules"><span class=secno>4.1. </span><dfn id=rules1>Rules
       for Shadow Content Generation</dfn></a>

      <li><a href="#rules0"><span class=secno>4.2. </span><dfn
       id=rules2>Rules for Shadow Content Destruction</dfn></a>

      <li><a href="#attribute"><span class=secno>4.3. </span><dfn
       id=attribute0>Attribute Forwarding</dfn></a>
       <ul class=toc>
        <li><a href="#forwarding"><span class=secno>4.3.1. </span>Forwarding
         to and from text nodes</a>

        <li><a href="#forwarding0"><span class=secno>4.3.2. </span>Forwarding
         language metadata</a>

        <li><a href="#error0"><span class=secno>4.3.3. </span>Error
         handling</a>

        <li><a href="#type-specifiers"><span class=secno>4.3.4. </span>Type
         specifiers</a>

        <li><a href="#dynamic"><span class=secno>4.3.5. </span>Dynamic
         changes</a>

        <li><a href="#how-attribute"><span class=secno>4.3.6. </span>How
         Attribute Forwarding Affects the Shadow Tree</a>
       </ul>

      <li><a href="#processing0"><span class=secno>4.4. </span><dfn
       id=processing1>Processing <code>content</code> Elements</dfn></a>
       <ul class=toc>
        <li><a href="#how-nodes"><span class=secno>4.4.1. </span>How Nodes
         are Distributed</a>

        <li><a href="#when-nodes"><span class=secno>4.4.2. </span>When Nodes
         Are Redistributed</a>
       </ul>

      <li><a href="#the-final"><span class=secno>4.5. </span>The <dfn
       id=final>Final Flattened Tree</dfn></a>
       <ul class=toc>
        <li><a href="#terminology0"><span class=secno>4.5.1.
         </span>Terminology</a>
       </ul>

      <li><a href="#handling0"><span class=secno>4.6. </span><dfn
       id=handling2>Handling DOM Changes</dfn></a>

      <li><a href="#shadow0"><span class=secno>4.7. </span>Shadow Content and
       CSS</a>
       <ul class=toc>
        <li><a href="#selectors"><span class=secno>4.7.1. </span><dfn
         id=selectors0>Selectors and Shadow Scopes</dfn></a>

        <li><a href="#css-property"><span class=secno>4.7.2. </span><dfn
         id=css-property0>CSS Property Inheritance and Rendering</dfn></a>

        <li><a href="#the-bound-element"><span class=secno>4.7.3. </span>The
         <code>:bound-element</code> Pseudo-Class</a>

        <li><a href="#matching"><span class=secno>4.7.4. </span><dfn
         id=matching0>Matching Pseudo-Elements</dfn></a>
       </ul>

      <li><a href="#shadow1"><span class=secno>4.8. </span>Shadow Content and
       <code>xml:base</code></a>

      <li><a href="#shadow2"><span class=secno>4.9. </span><dfn id=shadow4
       title="Semantics of non-XBL elements in XBL contexts">Shadow Content
       and Other Things</dfn></a>
       <ul class=toc>
        <li><a href="#general"><span class=secno>4.9.1. </span>General
         Rules</a>

        <li><a href="#style"><span class=secno>4.9.2. </span><dfn
         id=style1>Style Blocks</dfn></a>

        <li><a href="#script"><span class=secno>4.9.3. </span><dfn
         id=script1>Script Blocks</dfn></a>

        <li><a href="#event"><span class=secno>4.9.4. </span><dfn
         id=event4>Event Handler Blocks</dfn></a>

        <li><a href="#html-forms"><span class=secno>4.9.5. </span>HTML
         Forms</a>

        <li><a href="#svg"><span class=secno>4.9.6. </span>SVG</a>
       </ul>

      <li><a href="#binding3"><span class=secno>4.10. </span><dfn
       id=binding12>Binding Style Sheets</dfn></a>
       <ul class=toc>
        <li><a href="#styleSummary"><span class=secno>4.10.1. </span>Summary
         of styling rules</a>
       </ul>
     </ul>

    <li><a href="#binding4"><span class=secno>5. </span><dfn
     id=binding13>Binding Implementations</dfn></a>
     <ul class=toc>
      <li><a href="#the-xblimplementation"><span class=secno>5.1. </span>The
       <code>XBLImplementation</code> Interface</a>

      <li><a href="#the-xblimplementationlist"><span class=secno>5.2.
       </span>The <code>XBLImplementationList</code> Interface</a>

      <li><a href="#accessing"><span class=secno>5.3. </span>Accessing
       Binding Implementations</a>

      <li><a href="#ecmascript"><span class=secno>5.4. </span><dfn
       id=ecmascript0>ECMAScript Bindings</dfn></a>
       <ul class=toc>
        <li><a href="#compiling"><span class=secno>5.4.1. </span><dfn
         id=compiling0>Compiling ECMAScript Bindings</dfn></a>

        <li><a href="#invoking"><span class=secno>5.4.2. </span>Invoking
         Methods on an ECMAScript Implementation Object</a>
       </ul>
     </ul>

    <li><a href="#event0"><span class=secno>6. </span><dfn id=event5>Event
     Handlers</dfn></a>
     <ul class=toc>
      <li><a href="#event1"><span class=secno>6.1. </span><dfn
       id=event6>Event Forwarding</dfn></a>

      <li><a href="#registering"><span class=secno>6.2. </span><dfn
       id=registering0>Registering Event Handlers with the
       <code>handler</code> Element</dfn></a>

      <li><a href="#mouse"><span class=secno>6.3. </span><dfn id=mouse0>Mouse
       Event Handler Filters</dfn></a>

      <li><a href="#key-event"><span class=secno>6.4. </span><dfn
       id=key-event0>Key Event Handler Filters</dfn></a>

      <li><a href="#text-input"><span class=secno>6.5. </span><dfn
       id=text-input0>Text Input Event Handler Filters</dfn></a>

      <li><a href="#mutation"><span class=secno>6.6. </span><dfn
       id=mutation0>Mutation Event Handler Filters</dfn></a>

      <li><a href="#modifiers"><span class=secno>6.7. </span><dfn
       id=modifiers0>Modifiers</dfn></a>

      <li><a href="#event2"><span class=secno>6.8. </span><dfn
       id=event7>Event Flow and Targeting Across Shadow Scopes</dfn></a>

      <li><a href="#the-default"><span class=secno>6.9. </span><dfn
       id=the-default0 title="default phase">The Default Phase</dfn></a>

      <li><a href="#the-focus"><span class=secno>6.10. </span>The
       <code>focus</code>, <code>DOMFocusIn</code>, <code>blur</code>, and
       <code>DOMFocusOut</code> Events</a>

      <li><a href="#the-mouseover"><span class=secno>6.11. </span>The
       <code>mouseover</code> and <code>mouseout</code> Events</a>

      <li><a href="#event3"><span class=secno>6.12. </span><dfn
       id=event8>Event Handlers Implemented in ECMAScript</dfn></a>
     </ul>

    <li><a href="#dom-interfaces"><span class=secno>7. </span><dfn
     id=dom-interfaces0>DOM Interfaces</dfn></a>
     <ul class=toc>
      <li><a href="#the-documentxbl"><span class=secno>7.1. </span>The
       <code>DocumentXBL</code> Interface</a>

      <li><a href="#the-elementxbl"><span class=secno>7.2. </span>The
       <code>ElementXBL</code> Interface</a>
       <ul class=toc>
        <li><a href="#scoping"><span class=secno>7.2.1. </span>Scoping and
         Access Using the DOM</a>
       </ul>

      <li><a href="#the-xblcontentelement"><span class=secno>7.3. </span>The
       <code>XBLContentElement</code> Interface</a>

      <li><a href="#the-xbltemplateelement"><span class=secno>7.4. </span>The
       <code>XBLTemplateElement</code> Interface</a>

      <li><a href="#the-eventxbl"><span class=secno>7.5. </span>The
       <code>EventXBL</code> Interface</a>
     </ul>

    <li><a href="#resources"><span class=secno>8. </span>Resources</a>
     <ul class=toc>
      <li><a href="#loading"><span class=secno>8.1. </span><dfn
       id=loading2>Loading External Resources</dfn></a>
       <ul class=toc>
        <li><a href="#binding5"><span class=secno>8.1.1. </span>Binding
         Documents</a>

        <li><a href="#external"><span class=secno>8.1.2. </span>External
         Resources</a>
       </ul>

      <li><a href="#loading0"><span class=secno>8.2. </span><dfn
       id=loading3>Loading and Running Scripts</dfn></a>
       <ul class=toc>
        <li><a href="#xforms"><span class=secno>8.2.1. </span>XForms
         Actions</a>

        <li><a href="#scripting"><span class=secno>8.2.2. </span>Scripting
         Model</a>
       </ul>

      <li><a href="#loading1"><span class=secno>8.3. </span><dfn
       id=loading4>Loading Style Sheets</dfn></a>

      <li><a href="#interpretation"><span class=secno>8.4. </span><dfn
       id=interpretation0>Interpretation of URIs to XBL bindings</dfn></a>
     </ul>

    <li><a href="#summaries"><span class=secno>9. </span>Summaries of
     Elements, Attributes, and Events</a>
     <ul class=toc>
      <li><a href="#elements"><span class=secno>9.1. </span>Elements and
       Attributes</a>

      <li><a href="#events"><span class=secno>9.2. </span>Events</a>

      <li><a href="#implementations"><span class=secno>9.3.
       </span>Implementations</a>
     </ul>

    <li class=no-num><a href="#acknowledgments">Acknowledgments</a>

    <li class=no-num><a href="#references">References</a>
   </ul>
   <!--end-toc-->
   <hr>

   <h2 id=introduction><span class=secno>1. </span>Introduction</h2>

   <p>This specification defines the XML Binding Language and some supporting
    DOM interfaces and CSS features. XBL is a mechanism for overriding the
    standard presentation and interactive behavior of particular elements by
    attaching those elements to appropriate definitions, called <a
    href="#binding16" title=binding>bindings</a>. Bindings can be attached to
    elements using either CSS, the DOM, or by declaring, in XBL, that
    elements matching a specific selector are implemented by a particular
    binding. The element that the binding is attached to, called the <a
    href="#bound">bound element</a>, acquires the new behavior and
    presentation specified by the binding.</p>

   <p>Bindings can contain <a href="#handlers0" title=handlers>event
    handlers</a> that watch for events on the bound element, an <a
    href="#implementation0">implementation</a> of new methods and properties
    that become accessible from the bound element, <a href="#shadow5">shadow
    content</a> that is inserted underneath the bound element, and associated
    <a href="#resources1">resources</a> such as scoped style sheets and
    precached images, sounds, or videos.</p>

   <p><span title="Except if script invoked by XBL explicitly changes the
    original DOM.">XBL cannot be used to give a document new
    semantics.</span> The meaning of a document is not changed by any
    bindings that are associated with it, only its presentation and
    interactive behavior.</p>

   <div class=example id=intro-example>
    <p>To help readers understand how certain features can be used, this
     specification includes some examples.</p>

    <p>In these examples, a long ellipsis ("...") is used to indicate elided
     content that would be present in a full example but has been removed for
     clarity.</p>

    <p>Here we see a simple binding being used to reorder content in an HTML
     page, so that the element with <code>class="nav"</code> is positioned
     before the element with <code>class="main"</code>. CSS associated with
     the binding is then used to position the two elements.</p>

    <pre>&lt;xbl xmlns="http://www.w3.org/ns/xbl">
 &lt;binding id="nav-then-main">
  &lt;template>
   &lt;div id="wrapper">
    &lt;div id="col2">&lt;content includes=".nav"/>&lt;/div>
    &lt;div id="col1">&lt;content includes=".main"/>&lt;/div>
   &lt;/div>
  &lt;/template>
  &lt;resources>
   &lt;style>
    #wrapper { display: table-row; }
    #col1, #col2 { display: table-cell; }
   &lt;/style>
  &lt;/resources>
 &lt;/binding>
&lt;/xbl></pre>

    <p>The HTML page associated with such a binding might look like:</p>

    <pre>&lt;!DOCTYPE HTML>
&lt;html>
 &lt;head>
  &lt;title>Demo&lt;/title>
  &lt;link rel="stylesheet" href="example.css">
 &lt;/head>
 &lt;body>
  &lt;div class="main">
   &lt;h1>Demo&lt;/h1>
   ...
  &lt;/div>
  &lt;div class="nav">
   &lt;p>&lt;a href="http://example.com/">Home&lt;/a>&lt;/p>
   ...
  &lt;/div>
 &lt;/body>
&lt;/html></pre>

    <p>The CSS stylesheet referred to from that document would include
     various stylistic rules, and would in particular contain a link to the
     XBL file, making it apply to the <code>body</code> element so as to
     reorder the two child elements:</p>

    <pre>/* Colors and Fonts */
h1 { font: 2em sans-serif; color: green; background: white; }
...

/* Reorder content */
body { binding: url(example.xml#nav-then-main); }</pre>

    <p>The result of all the above is equivalent to the result one would get
     if one simply placed the <code title="">div</code> element with
     <code>class="nav"</code> before the <code title="">div</code> element
     with <code>class="main"</code>. However, the effect is achieved without
     needing any changes to the markup. This allows the same markup to be
     given different presentations dynamically. It also allows changes to be
     applied across entire sites by merely changing global stylesheet and
     binding files, much as CSS can be used to change the layout and
     presentation of a site even without XBL.</p>
   </div>

   <div class=example id=simple-shadow-example>
    <p>Here is another example, this time of an inaccessible implementation
     of the proposed HTML5 <code title="">details</code> disclosure element:
     it opens and closes when clicked, and reflects its current state in the
     element's "<code>open</code>" attribute.</p>

    <pre>&lt;xbl xmlns="http://www.w3.org/ns/xbl">
 &lt;binding element="details">
  &lt;template>
   &lt;div>
    &lt;div>&lt;content includes="legend:first-child">Details...&lt;/content>&lt;/div>
    &lt;div state="hidden" id="container">&lt;content/>&lt;/div>
   &lt;/div>
  &lt;/template>
  &lt;handlers>
   &lt;handler event="click" phase="default-action">
    this.open = !this.open;
   &lt;/handler>
   &lt;handler event="DOMAttrModified" attr-name="open" attr-change="addition" phase="target">
    this.shadowTree.getElementById('container').setAttribute('state', 'visible');
   &lt;/handler>
   &lt;handler event="DOMAttrModified" attr-name="open" attr-change="removal" phase="target">
    this.shadowTree.getElementById('container').setAttribute('state', 'hidden');
   &lt;/handler>
  &lt;/handlers>
  &lt;implementation>
   ({
     get open() { return this.boundElement.hasAttribute('open'); },
     set open(val) {
       if (val)
         this.boundElement.setAttribute('open', 'open');
       else
         this.boundElement.removeAttribute('open');
       return this.open;
     },
   })
  &lt;/implementation>
  &lt;resources>
   &lt;style>
    #container[state=hidden] { display: none; }
   &lt;/style>
  &lt;/resources>
 &lt;/binding>
&lt;/xbl></pre>
   </div>

   <p class=note>Since the examples are all untested (there are no XBL2
    implementations at the time of writing), it is quite possible that they
    have errors. Please report any errors you think you see, so that we can
    correct the examples.</p>

   <h3 id=relationship><span class=secno>1.1. </span>Relationship to XBL1</h3>

   <p>This specification is not backwards compatible with XBL1.</p>

   <p>There are numerous changes. However, of particular importance to
    readers familiar with XBL1, there have been some changes to the element
    names. In particular, the XBL1 element <code title="">content</code> is
    now called <code><a href="#template0">template</a></code>, and the XBL1
    element <code title="">children</code> is now called <code><a
    href="#content0">content</a></code>.</p>

   <h3 id=relationship0><span class=secno>1.2. </span>Relationship to XSLT</h3>

   <p>This specification has a similar scope to XSLT. The main differences
    are:</p>

   <ul>
    <li>
     <p>XSLT operates on a static DOM, permanently replacing that DOM for
      rendering. XBL, on the other hand, transparently transforms the DOM for
      rendering while leaving the underlying structure intact, and
      dynamically reflects changes to the underlying DOM in the transformed
      rendering.

    <li>
     <p>XSLT allows any arbitrary transformation to be performed. XBL shadow
      trees, on the other hand, only support reordering of the bound
      element's child nodes and interleaving of those explicit children with
      shadow content. Arbitrary transformations are not possible in XBL while
      retaining the transparent nature of XBL's shadow tree processing.
   </ul>

   <p>In addition, XBL can be used for component creation, which is not
    covered by XSLT.</p>

   <h3 id=terminology><span class=secno>1.3. </span>Terminology and
    Conventions</h3>

   <p>An <dfn id=xbl-user title="XBL user agents">XBL user agent</dfn> is an
    implementation that attempts to support this specification.</p>

   <p>A <dfn id=binding14 title="">binding</dfn> is the definition of
    behavior that can be applied to an element so as to augment its
    presentation.</p>

   <p>The namespace of all the <dfn id=xbl-elements0>XBL elements</dfn> and
    <dfn id=xbl-global>XBL global attributes</dfn> must be: <code
    class=uri>http://www.w3.org/ns/xbl</code>

   <p>An <dfn id=xbl-document>XBL document</dfn> is an XML document that has
    the <code><a href="#xbl0">xbl</a></code> element at its root.</p>

   <p>A <dfn id=non-xbl>non-XBL document</dfn> is an XML document whose root
    element is from a namespace other than XBL (e.g. XHTML). A non-XBL
    document can include XBL, if the other languages involved allow it.</p>

   <p>An <dfn id=xbl-subtree title="XBL subtrees">XBL subtree</dfn> is a
    subtree in an XML document, the subtree having as its root
    <!-- XXX better word
  than root? --> node an <code><a
    href="#xbl0">xbl</a></code> element in the XBL namespace, which is used
    to define bindings. XBL subtrees can stand alone in <a
    href="#xbl-document" title="XBL document">XBL documents</a>, or can be
    included in <a href="#non-xbl" title="non-XBL document">non-XBL
    documents</a>.</p>

   <p>The term <dfn id=binding15>binding document</dfn> is used to mean
    either an <a href="#xbl-document">XBL document</a> or a <a
    href="#non-xbl">non-XBL document</a> containing one or more <span
    title="XBL subtree">XBL subtrees</span>.</p>

   <div class=example id=date-example>
    <p>In the following XHTML example, the XBL subtree is the portion of the
     markup that is emphasized. It is in a non-XBL document, since the root
     element is an XHTML element.</p>

    <pre>&lt;html xmlns="http://www.w3.org/1999/xhtml">
 &lt;head>
  &lt;title>Demo&lt;/title>
  <strong>&lt;xbl xmlns="http://www.w3.org/ns/xbl">
   &lt;script>&lt;![CDATA[
     function fmt(n) {
       if (n < 10)
         return "0" + n;
       else
         return n;
     }
   ]]&gt;&lt;/script>
   &lt;binding element=".date">
    &lt;implementation>
      ({
        xblBindingAttached: function() {
          var tm = /(\d\d\d\d)-(\d\d)-(\d\d) (\d\d):(\d\d) UTC$/.exec(this.boundElement.textContent);
          var date = new Date();
          date.setUTCFullYear(parseInt(tm[1], 10));
          date.setUTCMonth(parseInt(tm[2], 10) - 1);
          date.setUTCDate(parseInt(tm[3], 10));
          date.setUTCHours(parseInt(tm[4], 10));
          date.setUTCMinutes(parseInt(tm[5], 10));
          date.setUTCSeconds(0);
          this.boundElement.textContent = date.getFullYear() + "-" +
                                      fmt(date.getMonth() + 1) + "-" +
                                      fmt(date.getDate()) + " " +
                                      fmt(date.getHours()) + ":" +
                                      fmt(date.getMinutes()) + " LT";
          this.boundElement.title = "Adjusted to local time zone"
        },
      })
    &lt;/implementation>
   &lt;/binding>
  &lt;/xbl></strong>
 &lt;/head>
 &lt;body>
  &lt;h1>Demo&lt;/h1>
  &lt;p class="date">2006-08-10 18:40 UTC&lt;/p>
  &lt;p>...&lt;/p>
 &lt;/body>
&lt;/html></pre>

    <p>(As an aside, the binding defined in this example causes elements with
     <code>class="date"</code> to have their content parsed into a UTC date
     and converted into a local time. The binding mutates the original DOM to
     do this, and it doesn't reflect any dynamic changes made to the
     element's content; there are better, albeit slightly more involved, ways
     of achieving the same effect that don't have these problems.)</p>
   </div>

   <p>A <dfn id=bound>bound element</dfn> is an XML or HTML element to which
    a binding has been applied.</p>

   <p class=example>In the <a href="#date-example">example above</a>, the
    first <code>p</code> element is the <em><a href="#bound">bound
    element</a></em>.</p>

   <p>A <dfn id=bound0>bound document</dfn> is an XML or HTML document
    containing one or more <a href="#bound" title="bound element">bound
    elements</a>.</p>

   <p class=example>In the <a href="#date-example">example at the top of this
    section</a>, the document is both the <em><a href="#binding15">binding
    document</a></em> (because it contains the definition of the binding),
    and the <em><a href="#bound0">bound document</a></em> (because it
    contains the affected <em><a href="#bound">bound element</a></em>). In
    the <a href="#intro-example">example in the introduction section</a>, the
    HTML file is the <em><a href="#bound0">bound document</a></em>, and the
    XBL file is the <em><a href="#binding15">binding document</a></em>.</p>

   <p>In this specification, the term <dfn id=in-error>in error</dfn>,
    typically used of an element or attribute, means that the element,
    attribute, or other construct is not conformant according to the rules of
    this specification. Rules for exactly how the construct must be treated
    when it is in error are always given when the term is used. Typically
    this will involve <dfn id=ignoring title=ignore>ignoring</dfn> the
    erroneous nodes, meaning the UA must, <em>for the purposes of XBL
    processing</em>, act as if those nodes were absent. UAs must not,
    however, remove such nodes from the DOM in order to ignore them, nor
    should it change what DOM interfaces those nodes implement. The nodes
    retain all their non-XBL semantics.</p>

   <p>UAs should report all errors to users, although they may do this in an
    unobtrusive way, for example in an error console.</p>

   <p>In addition to the error handling rules given in this specification,
    UAs may abort all processing when encountering an error.</p>

   <p class=note>Aborting is only likely to be a viable error handling
    mechanism in controlled environments, e.g. in conformance checkers. Web
    browsers are expected to use the error recovery mechanisms described in
    this specification, not abort.</p>

   <p>A <dfn id=correct title=correct>correct</dfn> element, attribute,
    value, or binding is one which is not <a href="#in-error">in error</a>.</p>

   <div class=example id=correct-vs-error-example>
    <p>The following sample XBL document is <a href="#in-error">in error</a>
     because the <code><a href="#script2">script</a></code> element in XBL is
     only allowed as a child of the <code><a href="#xbl0">xbl</a></code>
     element:</p>

    <pre>&lt;xbl xmlns="http://www.w3.org/ns/xbl">
 &lt;binding id="demo">
  <strong>&lt;script>
   // This example is <em><a href="#in-error">in error</a></em>.
   // You are not allowed to put a <code><a href="#script2">script</a></code> element inside
   // a <code><a href="#binding16">binding</a></code> element, only inside an <code><a href="#xbl0">xbl</a></code> element.
   // This is because scripts evaluate in the scope of the
   // entire XBL document, and are therefore not associated
   // with a particular binding.
   function life() {
     return 42;
   }
  &lt;/script></strong>
 &lt;/binding>
&lt;/xbl></pre>

    <p>The correct way of doing this would be:</p>

    <pre>&lt;xbl xmlns="http://www.w3.org/ns/xbl">
 &lt;script>
  // This example is <a href="#correct">correct</a>.
  function life() {
    return 42;
  }
 &lt;/script>
 &lt;binding id="demo">
  &lt;!-- Now you can see that this binding actually does nothing. -->
 &lt;/binding>
&lt;/xbl></pre>
   </div>

   <p>The term "<dfn id=semantics>semantics</dfn>" is used to refer to the
    <em>intrinsic meaning</em> or processing model of elements, attributes,
    events, and DOM interface members. Semantics are defined by
    specifications; for example, this specification defines the semantics of
    XBL elements.</p>

   <p>XBL elements are frequently referred to by just their local name in
    this specification. In real documents, they must be associated with the
    XBL namespace as per the rules given in the Namespaces in XML
    specification <a href="#refsXMLNS">[XMLNS]</a>.</p>

   <p>For convenience, elements and attributes from specific namespaces are
    sometimes referred to simply in the form <code>prefix:localname</code>,
    without explicitly stating which namespace the prefix is bound to. When
    this occurs, readers should assume the following prefix declarations are
    in scope:</p>

   <pre><!--xmlns="http://www.w3.org/ns/xbl"
-->xmlns:xbl="http://www.w3.org/ns/xbl"
xmlns:xforms="http://www.w3.org/2002/xforms"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:html="http://www.w3.org/1999/xhtml"</pre>

   <p>When this specification refers to <em>elements in a namespace</em>, it
    does not exclude elements in <em>no</em> namespace; the null namespace is
    considered a namespace like any other for the purposes of XBL processing.</p>

   <p>All element names, attribute names, and attribute values in XBL are
    case sensitive, with the exception of attribute values defined by other
    specifications (those have the sensitivity defined by those other
    specifications).</p>

   <p>An <dfn id=xml-mime>XML MIME type</dfn> is <code>text/xml</code>,
    <code>application/xml</code>, or any MIME type ending with the string
    <code>+xml</code> (ignoring any MIME parameters).</p>

   <p>The terms "<dfn id=author>author style sheets</dfn>", "<dfn
    id=user-style>user style sheets</dfn>", "<dfn id=user-agent>user agent
    style sheets</dfn>", and "<dfn id=pseudo-element>pseudo-element</dfn>"
    are used as defined by the CSS specifications. <a
    href="#refsCSS21">[CSS21]</a></p>

   <p>The term "<dfn id=qname>QName</dfn>" is used as defined by the
    Namespaces in XML specification. <a href="#refsXMLNS">[XMLNS]</a></p>

   <p>The term "<dfn id=view>view</dfn>" is used as defined by the DOM2 Views
    specification. <a href="#refsDOM2VIEWS">[DOM2VIEWS]</a></p>

   <h3 id=conformance><span class=secno>1.4. </span>Conformance</h3>

   <p>As well as sections marked as non-normative, all diagrams, examples,
    and notes in this specification are non-normative. Everything else in
    this specification is normative.</p>

   <p>The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT",
    "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in the
    normative parts of this document are to be interpreted as described in
    RFC2119. For readability, these words do not appear in all uppercase
    letters in this specification. <a href="#refsRFC2119">[RFC2119]</a></p>

   <p>There are two classes of products that can claim conformance to this
    implementation: <a href="#xbl-subtree">XBL subtrees</a>, and <a
    href="#xbl-user">XBL user agents</a>.</p>

   <p><a href="#xbl-subtree">XBL subtrees</a> must satisfy the constraints
    described in this specification in order to be considered conformant.</p>

   <p>Products that generate XBL subtrees cannot claim conformance to this
    specification, though they can claim to only produce XBL subtrees that
    themselves are conformant to this specification.</p>

   <p><a href="#xbl-user">XBL user agents</a> must behave as described by
    this specification in order to be considered conformant, even when faced
    with non-conformant XBL subtrees.</p>

   <p>User agents may optimize any algorithm given in this specification, so
    long as the end result is indistinguishable from the result that would be
    obtained by the specification's algorithms. (The algorithms in this
    specification are generally written with more concern for clarity than
    over efficiency.)</p>

   <p id=dom-basis>This specification is defined in terms of the DOM. The
    language in this specification assumes that the user agent expands all
    entity references, and therefore does not include entity reference nodes
    in the DOM. If user agents do include entity reference nodes in the DOM,
    then user agents must handle them as if they were replaced by their DOM
    replacement values when implementing this specification.</p>

   <p class=example>For example, if a requirement talks about an element's
    child text nodes, then any text nodes that are children of an entity
    reference that is a child of that element would be used as well.</p>

   <h4 id=error><span class=secno>1.4.1. </span>Error Handling</h4>

   <p>This specification describes the rules for processing of XBL elements
    and related features, whether they are used in a conformant manner or
    not. Conformant implementations, therefore, will interoperably handle any
    content, whether valid or not.</p>

   <h4 id=attributes><span class=secno>1.4.2. </span><dfn id=attributes21
    title=selector>Attributes Containing Selectors</dfn></h4>

   <p>The <code title=attr-binding-element><a
    href="#element">element</a></code> attribute of the <code><a
    href="#binding16">binding</a></code> element and the <code
    title=attr-content-includes><a href="#includes">includes</a></code>
    attribute of the <code><a href="#content0">content</a></code> element, if
    specified, must have their values parsed according to the rules in the
    Selectors specification. <a href="#refsSELECTORS">[SELECTORS]</a></p>

   <p class=note>This specification does not specify what level of Selectors
    support is required.</p>

   <p>Namespace prefixes can be used with selectors. In XBL attributes that
    take selectors, the namespace prefixes that may be used are the prefixes
    that are in scope using the <code>xmlns:*</code> syntax. User agents must
    use the XML namespace prefixes in scope on the attribute's element when
    parsing selectors with namespace prefixes. The default namespace in
    selectors in XBL attributes is always unbound. <a
    href="#refsXMLNS">[XMLNS]</a></p>

   <p class=note>The "xml" prefix is defined to always be declared (and bound
    to the <code>http://www.w3.org/XML/1998/namespace</code> namespace), as
    is the "xmlns" prefix (which is bound to
    <code>http://www.w3.org/2000/xmlns/</code>).</p>

   <p>Selectors are case-insensitive, but namespace prefixes are
    case-sensitive. Thus, there could be multiple namespace prefixes declared
    that match a particular namespace prefix as used in a selector. User
    agents must act as if all namespace prefixes in scope were lexically
    sorted by Unicode codepoint, with the first namespace prefix of each
    group of namespace prefixes differing only by case (using case folding as
    defined by Unicode) being the one assumed to be in scope for the purposes
    of selector matching. <a href="#refsUNICODE">[UNICODE]</a></p>

   <div class=example id=selectors-example>
    <p>The following excerpt from an XBL document defines a binding that is
     bound to elements declaring links (e.g. the <code title="">a</code>
     element in HTML).</p>

    <pre>&lt;xbl xmlns="http://www.w3.org/ns/xbl">
 &lt;binding element=":link, :visited">
  ...
 &lt;/binding>
&lt;/xbl></pre>

    <p>The following excerpt defines a binding bound to any element in the
     <code>http://example.com/</code> namespace that is the child of an
     element in the <code>http://www.example.net/</code> namespace with the
     name <code>parent</code>. (Note that the <code>&gt;</code> character
     does not have to be escaped.)</p>

    <pre>&lt;xbl xmlns="http://www.w3.org/ns/xbl"
     xmlns:eg1="http://www.example.net/"
     xmlns:eg2="http://example.com/">
 &lt;binding element="eg1|parent > eg2|*">
  ...
 &lt;/binding>
&lt;/xbl></pre>

    <p>Finally this third example defines a binding that matches elements
     with the name <code>blockquote</code>, regardless of what namespace they
     are in. If it is known that the binding document is only ever going to
     be used from documents that use one namespace, for example if the
     bindings are always to be imported into HTML documents, then it is
     easier to just specify the local name (as in this example) and ignore
     the namespaces.</p>

    <pre>&lt;xbl xmlns="http://www.w3.org/ns/xbl">
 &lt;binding element="blockquote">
  ...
 &lt;/binding>
&lt;/xbl></pre>
   </div>

   <h4 id=attributes0><span class=secno>1.4.3. </span><dfn id=attributes22
    title=space-separated>Attributes Containing Space-Separated Values</dfn></h4>

   <p>Some attributes are defined as taking space-separated values. The list
    of values for such attributes must be obtained by taking the attribute's
    value, replacing any sequences of U+0009, U+000A, U+000D, and U+0020
    characters (in any order) with a single U+0020 SPACE character, dropping
    any leading or trailing U+0020 SPACE character, and then chopping the
    resulting string at each occurrence of a U+0020 character, dropping that
    character in the process.</p>

   <p>A space-separated attribute whose value is the empty string, or which
    consists of only U+0009, U+000A, U+000D, and U+0020 characters, has no
    values.</p>

   <div class=example id=space-separated-example>
    <p>In the attribute <code>button="1 2"</code>, the values are "1" and
     "2".</p>

    <p>In the attribute
     <code>class="&nbsp;&nbsp;key&nbsp;-&nbsp;note&nbsp;-&nbsp;rocks"</code>,
     there are five keywords: "key", "note", "rocks", and two occurrences of
     the single-character keyword "-".</p>
   </div>

   <h4 id=attributes1><span class=secno>1.4.4. </span><dfn id=attributes23
    title="valid MIME type">Attributes Containing MIME Types</dfn></h4>

   <p>Some attributes are defined as containing MIME types. A valid MIME type
    is one that matches the production for <code
    title="">valid-MIME-type</code> in the following EBNF:</p>

   <pre>valid-MIME-type := type "/" subtype *(";" parameter)</pre>

   <p>...where the <code title="">type</code>, <code title="">subtype</code>,
    and <code title="">parameter</code> tokens are those defined in RFC 2045.
    <a href="#refsRFC2045">[RFC2045]</a></p>

   <h4 id=attributes2><span class=secno>1.4.5. </span><dfn id=attributes24
    title=URI>Attributes Containing URIs</dfn></h4>

   <p>Some attributes, pseudo-attributes, and method arguments are defined as
    specifying URIs. Such attributes must have values that match the <code
    title="">URI</code> token of RFC 3986 or the <code title="">IRI</code>
    token of RFC 3987. If they do not, they are <a href="#in-error">in
    error</a> (though the processing of erroneous URIs varies depending on
    the context). <a href="#refsRFC3986">[RFC3986]</a> <a
    href="#refsRFC3987">[RFC3987]</a></p>

   <h4 id=attributes3><span class=secno>1.4.6. </span>Attributes Containing
    Keywords</h4>

   <p>Certain attributes are defined as requiring certain values, e.g. <code
    title="">true</code> or <code title="">false</code>. For such attributes,
    the values must be specified exactly, in the case given in this
    specification, and with no leading or trailing whitespace.
    Implementations must only perform literal comparisons, and must not use
    case-insensitive comparisons nor trim attribute values before comparison.</p>

   <h4 id=extension><span class=secno>1.4.7. </span>Extension Mechanisms</h4>

   <p>XBL2 does not have an extension mechanism; implementations that
    recognize elements in the XBL namespace that aren't part of this
    specification, or who recognise attributes that have no namespace, that
    are on elements in the XBL namespace, and that aren't part of this
    specification, are non-conforming. If UAs support features in other
    namespaces that affect the XBL processing model in a way that contradicts
    this specification, then they are not conforming either.</p>

   <h4 id=feature><span class=secno>1.4.8. </span>Feature Strings for the DOM
    and SVG</h4>

   <p>XBL2 user agents must recognize the string "XBL" as being a DOM feature
    corresponding to support of XBL2 and its corresponding DOM APIs. Support
    for this specification must be treated as support for versions "1.0" and
    "2.0" of the "XBL" feature in terms of versions for the <code
    title="">hasFeature()</code> DOM Core method.</p>

   <p>XBL2 user agents that also implement SVG must recognize the following
    string as being a language extension URI for the purposes of SVG <code
    title="">requiredExtensions</code> evaluation:
    <code>http://www.w3.org/ns/xbl#v2</code></p>

   <h3 id=security><span class=secno>1.5. </span>Security Concerns</h3>

   <p><em>This section is non-normative.</em></p>

   <p>XBL raises a number of security concerns.</p>

   <p><strong>Data theft</strong>: A na&iuml;ve implementation of XBL would
    allow any document to bind to bindings defined in any other document, and
    (since referencing a binding allows full access to that binding
    document's DOM) thereby allow access to any remote file, including those
    on intranet sites or on authenticated extranet sites.</p>

   <p>XBL itself does not do anything to prevent this. However, it is
    strongly suggested that an access control mechanism (such as that
    described in <a href="#refsACCESSCONTROL">[ACCESSCONTROL]</a>) be used to
    prevent such cross-domain accesses unless the remote site has allowed
    accesses.</p>

   <p><strong>Privilege escalation</strong>: In conjunction with data theft,
    there is the concern that a page could bind to a binding document on a
    remote site, and then use the privileges of that site to obtain further
    information. XBL prevents this by requiring that the bindings all run in
    the security context of the <em><a href="#bound0">bound
    document</a></em>, so that accessing a remote binding document does not
    provide the bound document with any extra privileges on the remote
    domain.</p>

   <p><strong>Cookie theft</strong>: Related to privilege escalation is the
    risk that once an access-controlled binding document hosted on a remote
    site has been loaded, authentication information stored in cookies for
    that domain would become accessible to the bound document. XBL prevents
    this by requiring that the <code>cookie</code> attribute on the
    <code>DocumentWindow</code> interface be set to null.</p>

   <p><strong>Secure bindings</strong>: Using XBL for bindings that need
    access to the local filesystem, e.g. for implementing File Upload form
    controls, is not yet handled by this specification. However, a future
    version will provide a secure way to define an XBL binding that can be
    used to implement privileged mechanisms that can then be used by other
    bindings to provide such controls.</p>

   <h2 id=xbl-elements><span class=secno>2. </span>XBL Elements</h2>

   <p>The start of any XBL subtree is an <code><a href="#xbl0">xbl</a></code>
    element, which is described below.</p>

   <p>When an XBL element is found inside an element other than those listed
    under the "Expected contexts" list in the definitions below, it is <a
    href="#in-error">in error</a>. When an XBL element has a child node that
    does not satisfy the "Expected children" list in its definition (for
    instance because it is the wrong node type, wrong element type, or
    because too many elements of its type preceded it), the <em>child</em> is
    <a href="#in-error">in error</a>. In both cases, being <a
    href="#in-error">in error</a> means that the UA must, for the purposes of
    XBL evaluation, treat the XBL subtree as it would if the erroneous node
    and all its descendants were not present in the DOM.</p>

   <p>However, non-XBL elements retain their semantics, even when considered
    to be <a href="#in-error">in error</a> for the purposes of XBL.</p>

   <p>Regardless of the requirements of the last few paragraphs and of the
    "expected children" lines, comment nodes, and text and CDATA nodes
    containing only whitespace characters, may always be given as children of
    XBL elements.</p>

   <p>For cases where attributes on XBL elements do not conform to this
    specification or (for namespaced attributes) to another specification,
    and for cases where attributes in the XBL namespace are found on elements
    other than those listed as their "Expected element" in the definitions
    below, the error handling is similar: the attributes must be considered
    to be <a href="#in-error">in error</a> and the UA must <a
    href="#ignoring">ignore</a> them, meaning that the presence of these
    non-conforming attributes in no way affects the XBL processing.</p>

   <p>Further error handling rules for more specific cases are given where
    appropriate.</p>

   <p>XBL user agents that support CSS should act as if they had the
    following rules in their UA style sheet:</p>

   <pre>@namespace xbl url(http://www.w3.org/ns/xbl);
xbl|* { display: none; }
xbl|div { display: block; }
</pre>

   <p>XBL user agents that do not support CSS should not render the XBL
    elements other than the <code><a href="#div0">div</a></code> element,
    which they should render as a paragraph-like element.</p>

   <p class=note>The following sections describe the <em>content model</em>
    of XBL elements, but not their actual processing model. The processing
    model for XBL is described in later sections.</p>

   <h3 id=the-xbl><span class=secno>2.1. </span>The <dfn
    id=xbl0><code>xbl</code></dfn> Element</h3>

   <dl>
    <dt>Expected contexts:

    <dd>In an <a href="#xbl-document">XBL document</a>, none (this is the
     root element).

    <dd>In a <a href="#non-xbl">non-XBL document</a>, any non-XBL element
     whose specification allows the <code><a href="#xbl0">xbl</a></code>
     element as a child.

    <dt>Expected children (in any order):

    <dd><code><a href="#binding16">binding</a></code>: zero or more.

    <dd><code><a href="#script2">script</a></code>: zero or more.

    <dd>Any non-XBL element.
   </dl>

   <p class=note>The <code><a href="#xbl0">xbl</a></code> element is the root
    element of all XBL subtrees.</p>

   <h4 class="no-toc no-num" id=attributes4>Attributes</h4>

   <dl>
    <dt><dfn id=id0 title=attr-xbl-id>id</dfn>

    <dd>The <a href="#id13" title=attr-id><code>id</code> attribute</a>.

    <dt><dfn id=script-type title=attr-xbl-script-type>script-type</dfn>

    <dd>The <code title=attr-xbl-script-type><a
     href="#script-type">script-type</a></code> attribute specifies the MIME
     type of the scripting language used by all bindings and XBL script
     blocks in the XBL subtree. The value must be a <a
     href="#attributes23">valid MIME type</a>. If the attribute is not
     specified, the default language is ECMAScript<!-- XXX MIME type?
   -->.
     <a href="#refsECMA262">[ECMA262]</a>

    <dt><dfn id=style-type title=attr-xbl-style-type>style-type</dfn>

    <dd>The <code title=attr-xbl-style-type><a
     href="#style-type">style-type</a></code> attribute specifies the MIME
     type of the styling language used by all bindings and XBL style blocks
     in the XBL subtree. The value must be a <a href="#attributes23">valid
     MIME type</a>. If the attribute is not specified, the default language
     is CSS (<code class=mimetype>text/css</code>).
   </dl>

   <p>UAs must consider any <code><a href="#xbl0">xbl</a></code> elements
    that have another <code><a href="#xbl0">xbl</a></code> element as an
    ancestor as being <a href="#in-error">in error</a> and must then <a
    href="#ignoring">ignore</a> them, meaning those elements must never be
    considered to declare any bindings.</p>

   <p class=example>For example, conforming UAs will never bind elements to
    bindings defined by <code><a href="#binding16">binding</a></code>
    elements that have two <code><a href="#xbl0">xbl</a></code> ancestors.</p>

   <p>Similarly, XBL elements (other than the <code><a
    href="#xbl0">xbl</a></code> element itself) that do not have a <a
    href="#correct">correct</a> <code><a href="#xbl0">xbl</a></code> element
    as an ancestor are <a href="#in-error">in error</a> too, and UAs must <a
    href="#ignoring">ignore</a> them.</p>

   <p class=example>For example, conformant UAs will never bind elements to
    bindings defined by <code><a href="#binding16">binding</a></code>
    elements that have no <code><a href="#xbl0">xbl</a></code> ancestors at
    all.</p>

   <p>The same does not apply to the <code title=attr-xbl-style-type><a
    href="#style-type">style-type</a></code> and <code
    title=attr-xbl-script-type><a href="#script-type">script-type</a></code>
    attributes. If the UA does not support the specified styling language (or
    has styling disabled), it must still apply bindings as appropriate; only
    <code><a href="#style2">style</a></code> blocks must be ignored.
    Similarly, if the UA does not support the specified scripting language
    (or has scripting disabled), it must still apply bindings as appropriate;
    only <code><a href="#script2">script</a></code>, <code><a
    href="#handler0">handler</a></code> and <code><a
    href="#implementation0">implementation</a></code> sections must be
    ignored.</p>

   <p class=note>The empty string is not a special value for these
    attributes. Setting the <code title=attr-xbl-style-type><a
    href="#style-type">style-type</a></code> attribute to the empty string,
    e.g., will result in all <code><a href="#style2">style</a></code> blocks
    being ignored, since the empty string is not a valid MIME type that the
    UA supports.</p>

   <div class=example id=xbl-element-example>
    <p>The following document defines two bindings, one using Perl as the
     scripting language and the other using JavaScript. The second one
     extends the first one. (This example assumes that
     <code>text/x-perl</code> refers to Perl. Note that this specification
     doesn't actually define how Perl-based bindings are to be supported by
     the UA; the code below assumes that an <code><a
     href="#implementation0">implementation</a></code> element takes an
     anonymous Perl package and blesses a hash to that package for each
     binding, but this is nothing but conjecture.)</p>

    <pre>&lt;root>
 &lt;xbl xmlns="http://www.w3.org/ns/xbl"
      script-type="text/x-perl">
  &lt;binding id="validityImplementor">
   &lt;implementation>
    use strict;
    use vars qw(@ISA);
    @ISA = qw(XBLImplementation);
    sub validate {
      my $self = shift;
      my $data = $self->{boundElement}->getAttribute('value');
      my $pattern = $self->{boundElement}->getAttribute('pattern');
      return $data =~ m/^(?:$pattern)$/s;
    }
   &lt;/implementation>
  &lt;/binding>
 &lt;/xbl>
 &lt;xbl xmlns="http://www.w3.org/ns/xbl">
  &lt;binding id="validityClassifier" extends="#validityImplementor">
   &lt;handlers>
    &lt;handler event="change">
     if (this.baseBinding.validate())
       this.boundElement.className = 'valid';
     else
       this.boundElement.className = 'invalid';
    &lt;/handler>
   &lt;/handlers>
  &lt;/binding>
 &lt;/xbl>
&lt;/root></pre>

    <p>(What these bindings do is somewhat boring. The first does nothing
     except expose a "validate()" method that returns true if the contents of
     the element's <code title="">value</code> attribute matches the regular
     expression in the element's <code title="">pattern</code> attribute. The
     second makes the binding call this method every time the <code
     title="">change</code> event bubbles through the element, and changes
     the element's <code title="">class</code> attribute based on the return
     value.)</p>
   </div>

   <h3 id=the-binding><span class=secno>2.2. </span>The <dfn
    id=binding16><code>binding</code></dfn> Element</h3>

   <dl>
    <dt>Expected context:

    <dd><code><a href="#xbl0">xbl</a></code>

    <dt>Expected children (in any order):

    <dd><code><a href="#implementation0">implementation</a></code>: zero or
     one.

    <dd><code><a href="#template0">template</a></code>: zero or one.

    <dd><code><a href="#handlers0">handlers</a></code>: zero or one.

    <dd><code><a href="#resources1">resources</a></code>: zero or one.

    <dd>Any non-XBL element
   </dl>

   <div class=note>
    <p>The <code><a href="#binding16">binding</a></code> element describes a
     single XBL binding that adds presentation and interactive behavior to
     XML or HTML elements. Each binding has these optional components:</p>

    <p><em title=implementation><a href="#implementation0">Methods,
     Properties, and Fields</a></em>: A binding can specify additional
     methods that can be invoked on the element. It can also specify
     additional properties and fields that can be retrieved or set on the
     element. In this way the functionality of the bound element becomes
     extensible. (See: <a href="#binding23">binding implementations</a>.)</p>

    <p><em><a href="#template0">Template</a></em>: The optional <code><a
     href="#template0">template</a></code> defines the initial <em><a
     href="#shadow5">shadow content</a></em> for the bound element.</p>

    <p><em title=handlers><a href="#handlers0">Behavior</a></em>: A binding
     can define event listeners for various types of events. Some examples
     are: UI events (e.g., key and mouse events) on the bound element or on
     elements within the shadow content, and mutation events on the bound
     element and its descendants. (See: <a href="#event11">event
     handlers</a>.)</p>

    <p><em><a href="#resources1">Resources</a></em>: A binding can list style
     sheets that are scoped to the bound element, and images, sounds, videos,
     or other files that a user agent can pre-cache in order to improve
     performance. (See: <a href="#binding22">binding style sheets</a>,
     <span>prefetching resources</span>.)</p>

    <p>Bindings can act as an attachment mechanism, specifying a namespace
     and local name of elements to associate with the given binding when the
     binding is <span title=importing>imported</span>, using the <code
     title=attr-binding-element><a href="#element">element</a></code>
     attribute.</p>
   </div>

   <p>In addition to the above, the <code><a
    href="#binding16">binding</a></code> element's child nodes may include
    any element outside the XBL namespace. These are handled as they would be
    in any other context, and are <a href="#ignoring"
    title=ignore>ignored</a> by the XBL processing model.</p>

   <h4 class="no-toc no-num" id=attributes5>Attributes</h4>

   <dl>
    <dt><dfn id=id1 title=attr-binding-id>id</dfn>

    <dd>The <a href="#id13" title=attr-id><code>id</code> attribute</a>.

    <dt><dfn id=extends title=attr-binding-extends>extends</dfn>

    <dd>The <code title=attr-binding-extends><a
     href="#extends">extends</a></code> attribute is used to specify the <a
     href="#attributes24">URI</a> of a binding that this binding inherits
     from. (See: <a href="#interpretation1">interpretation of URIs to XBL
     bindings</a>.) If the URI is <a href="#in-error">in error</a> or does
     not refer to another binding, the UA must <a href="#ignoring">ignore</a>
     it, meaning that this binding does not explicitly inherit from another
     binding. (See: <a href="#explicit2">explicit inheritance</a>.) Only one
     URI can be specified.

    <dt><dfn id=element title=attr-binding-element>element</dfn>

    <dd>
     <p>This attribute, if specified, must contain a <a
      href="#attributes21">selector</a>. All elements in the binding
      document, and in any documents that <span title=importing>import</span>
      the binding document, that <a href="#selectors1" title="selectors and
      shadow scopes">match the given selector</a>, must be bound to the
      binding defined by this <code><a href="#binding16">binding</a></code>
      element. (The element's own shadow tree, if any, must not be taken into
      account when determining if it matches a selector for the purposes of
      this attribute.)</p>

     <p>If an <code title=attr-binding-element><a
      href="#element">element</a></code> attribute contains an invalid
      selector, it is <a href="#in-error">in error</a> and must be <a
      href="#ignoring" title=ignore>ignored</a>, meaning that while the
      binding is still parsed and may be referenced using other attachment
      mechanisms, the binding is not attached to any element by its <code
      title=attr-binding-element><a href="#element">element</a></code>
      attribute, as if the attribute had simply been omitted.</p>
    </dd>
    <!--

    "secure" - for secure bindings. These have no generated content,
    no event handlers.  Only an implementation. They execute in a
    different scope.

   -->
   </dl>

   <div class=note>
    <p>The <code><a href="#binding16">binding</a></code> element defines a
     presentation and behavior binding. It does not define an element's
     semantics. If an element has no semantics when processed alone, then it
     has no semantics when processed with XBL.</p>

    <p>Sending markup that does not have well-defined semantics over the
     network is bad practice. XBL is intended to be used to augment the user
     experience, for instance by providing better quality widgets or
     enhancing aesthetics. If the document being sent is <em>unusable</em>
     without XBL, then XBL is being abused.</p>
   </div>

   <div class=example id=binding-element-example>
    <p>This binding extends a binding defined in an external file. The
     binding in the other file defines a <code title="">value</code>
     property, and fires events when that property is changed. <em>This</em>
     binding just implements a check box that all <code>checkbox</code>
     elements in the <code>http://ui.example.com/</code> namespace will be
     bound to.</p>

    <pre>&lt;xbl xmlns="http://www.w3.org/ns/xbl"
     xmlns:ui="http://ui.example.com/">
 &lt;binding element="ui|checkbox" id="checkbox"
          extends="http://www.example.org/resources/ui-core.xml#valuedControl">
  &lt;template>
   &lt;div id="wrapper">
    &lt;div id="control"/>
    &lt;div id="label">&lt;content/>&lt;/div>
   &lt;/div>
  &lt;/template>
  &lt;resources>
   &lt;style>
    #wrapper > div { display: inline-block; }
   &lt;/style>
  &lt;/resources>
  &lt;handlers>
   &lt;handler event="click" phase="default-action">
    if (this.baseBinding.value == 'on')
      this.baseBinding.value = 'off';
    else
      this.baseBinding.value = 'on';
   &lt;/handler>
   &lt;handler event="change" phase="target">
    if (this.baseBinding.value == 'on')
      this.shadowTree.getElementById('control').textContent = '&#x2611;';
    else
      this.shadowTree.getElementById('control').textContent = '&#x2610;';
   &lt;/handler>
  &lt;/handlers>
 &lt;/binding>
&lt;/xbl></pre>
   </div>

   <h3 id=the-implementation><span class=secno>2.3. </span>The <dfn
    id=implementation0><code>implementation</code></dfn> Element</h3>

   <dl>
    <dt>Expected context:

    <dd><code><a href="#binding16">binding</a></code>

    <dt>Expected children:

    <dd>If the element has no <code title=attr-implementation-src><a
     href="#src">src</a></code> attribute: depends on the scripting language.

    <dd>If the element does have a <code title=attr-implementation-src><a
     href="#src">src</a></code> attribute: none.
   </dl>

   <p class=note>The <code><a
    href="#implementation0">implementation</a></code> element describes a set
    of methods, properties, and fields that are attached to the bound
    element. Once the binding is attached, these methods, properties, and
    fields can be invoked directly from the bound element.</p>

   <p>The <code><a href="#implementation0">implementation</a></code> element,
    if present, must either contain code in the language specified by the XBL
    subtree's <code title=attr-xbl-script-type><a
    href="#script-type">script-type</a></code> attribute, or have a <code
    title=attr-implementation-src><a href="#src">src</a></code> attribute
    that points to a resource containing code in the language specified by
    the <code title=attr-xbl-script-type><a
    href="#script-type">script-type</a></code> attribute. The syntax and
    semantics of this code depend on the specific language. This
    specification defines the semantics for <span title="ECMAScript binding
    for XBL">ECMAScript implementations</span>. (See: <a
    href="#binding23">binding implementations</a>.)</p>

   <h4 class="no-toc no-num" id=attributes6>Attributes</h4>

   <dl>
    <dt><dfn id=id2 title=attr-implementation-id>id</dfn>

    <dd>The <a href="#id13" title=attr-id><code>id</code> attribute</a>.

    <dt><dfn id=src title=attr-implementation-src>src</dfn>

    <dd>The <code title=attr-implementation-src><a href="#src">src</a></code>
     attribute specifies the <a href="#attributes24">URI</a> to a resource of
     the type given by the XBL subtree's <code title=attr-xbl-script-type><a
     href="#script-type">script-type</a></code> attribute. If the attribute
     is specified, the contents of the element must be ignored (even if the
     resource could not be fetched or was of the wrong type). (See: <a
     href="#binding23">binding implementations</a>.)
   </dl>

   <p>If an <code><a href="#implementation0">implementation</a></code>
    element is marked (via the <code title=attr-xbl-script-type><a
    href="#script-type">script-type</a></code> attribute of the <code><a
    href="#xbl0">xbl</a></code> element) as being in a language that the UA
    does not support, then the UA must <a href="#ignoring">ignore</a> it.
    Similarly, if the <code><a
    href="#implementation0">implementation</a></code> element points (using
    the <code title=attr-implementation-src><a href="#src">src</a></code>
    attribute) to a resource that is either unavailable, or not of the type
    specified by the <code title=attr-xbl-script-type><a
    href="#script-type">script-type</a></code> attribute of the <code><a
    href="#xbl0">xbl</a></code> element (or implied by its absence), then it
    is <a href="#in-error">in error</a> and the UA must <a
    href="#ignoring">ignore</a> it. In both cases, "ignoring it" means it
    must not be used as an implementation definition for any binding.</p>

   <p>How UAs must handle nodes inside <code><a
    href="#implementation0">implementation</a></code> elements depends on the
    language used. (See: <a href="#loading6">loading and running scripts</a>,
    <a href="#binding23">binding implementations</a>.)</p>

   <p><code><a href="#implementation0">implementation</a></code> blocks are
    evaluated once, on first use. Changes to an <code><a
    href="#implementation0">implementation</a></code> element or its contents
    have no effect once the element has been evaluated. (See: <a
    href="#binding23">binding implementations</a>.)</p>
   <!--
  <p>User agents may support an additional attribute with a name of
  the form <code><var>vendor</var>-binary</code>
  (e.g. <code>moz-binary=""</code> or <code>khtml-binary=""</code>)
  that contains information on native code implementations of the
  binding, if necessary. Content using such an attribute is
  non-conforming. (This feature is expected to be used in
  vendor-specific environments, not on the Web, and guidance for the
  name is provided only as an aid in preventing conflicts with future
  versions of this specification.)</p>
-->
   
   <div class=example id=implementation-element-example>
    <p>The following example shows a binding that defines a new method, two
     new properties (one with a custom getter and setter, one without), an
     internal field (used to back the property), and some hooks to initialize
     the binding and to handle the bound element being inserted and removed
     from the document. The binding applies to any element with the class
     "demo" (in the files into which it is imported, that is).</p>

    <pre>&lt;xbl xmlns="http://www.w3.org/ns/xbl">
 &lt;binding element=".demo">
  &lt;implementation>
   ({
      add: function (op1, op2) {
        return op1+op2;
      },
      get memory() {
        return this._memory.toString();
      },
      set memory(value) {
        this._memory = parseInt(value, 10);
      },
      xblBindingAttached: function() {
        this._memory = 0; // internal property to back "memory" external property
        this.external.state = 'initialized'; // external property
      },
      xblEnteredDocument: function() {
        this.external.state = 'in document';
      },
      xblLeftDocument: function() {
        this.external.state = 'out of document';
      },
   })
  &lt;/implementation>
 &lt;/binding>
&lt;/xbl></pre>

    <p class=note>The <code>get&nbsp;field()&nbsp;{}</code> and
     <code>set&nbsp;field(syntax)&nbsp;{}</code> features are <a
     href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Getters_and_Setters">part
     of JavaScript 1.5</a> and will probably be in ECMAScript 4. The examples
     in this specification assume an implementation that supports ECMAScript
     4, but any language could be supported in real implementations.</p>

    <p>The following example shows how to refer to an external file for the
     implementation of a binding. In this example, the handlers simply defer
     to methods defined in that implementation, so that all the code is in
     that file.</p>

    <pre>&lt;xbl xmlns="http://www.w3.org/ns/xbl">
 &lt;binding id="demo">
  &lt;implementation src="demo.js"/>
  &lt;handlers>
   &lt;handler event="click"> this.clicked(event); &lt;/handler>
   &lt;handler event="focus"> this.focused(event); &lt;/handler>
   &lt;handler event="blur">  this.blurred(event); &lt;/handler>
  &lt;/handlers>
 &lt;/binding>
&lt;/xbl></pre>

    <p>The <code>demo.js</code> file for this might look like this, to ensure
     that the methods defined are in fact internal methods, not exposed on
     the <a href="#external0">external object</a>:</p>

    <pre>({
  xblBindingAttached: function () {
    this.clicked = function (event) { ... };
    this.focused = function (event) { ... };
    this.blurred = function (event) { ... };
  },
  // ... other methods and fields ...
})</pre>
   </div>

   <h3 id=the-template><span class=secno>2.4. </span>The <dfn
    id=template0><code>template</code></dfn> Element</h3>

   <dl>
    <dt>Expected context:

    <dd><code><a href="#binding16">binding</a></code>

    <dt>Expected children:

    <dd>Anything. Of particular interest, the <code><a
     href="#content0">content</a></code> and <code><a
     href="#inherited0">inherited</a></code> elements may occur as
     descendants, and non-XBL descendant elements may host <code
     title=attr-attr><a href="#xblattr0">xbl:attr</a></code> and <code
     title=attr-pseudo><a href="#xblpseudo0">xbl:pseudo</a></code>
     attributes.
   </dl>

   <p class=note>The <code><a href="#template0">template</a></code> element
    contains child nodes that can be in any namespace. When a binding is
    attached, the <code><a href="#template0">template</a></code> element's
    child nodes are cloned and attached to the bound document under the bound
    element. Dynamic changes to the descendants of <code><a
    href="#template0">template</a></code> elements are reflected in bindings.
    (See: <a href="#shadow5">shadow content</a>.)</p>

   <h4 class="no-toc no-num" id=attributes7>Attributes</h4>

   <dl>
    <dt><dfn id=id3 title=attr-template-id>id</dfn>

    <dd>The <a href="#id13" title=attr-id><code>id</code> attribute</a>.

    <dt><dfn id=apply-author-sheets
     title=attr-template-apply-author-sheets>apply-author-sheets</dfn>

    <dd>The <code title=attr-template-apply-author-sheets><a
     href="#apply-author-sheets">apply-author-sheets</a></code> attribute
     indicates whether or not rules in <a href="#author">author style
     sheets</a> associated with the bound element's document apply to the
     shadow content generated by the binding. Its value must be either
     <code>true</code> (indicating that they do) or <code>false</code>
     (indicating that they do not). The default behavior, which is used when
     the attribute is omitted or has a value other than the two allowed
     values, is to not apply the bound document's <a href="#author">author
     style sheets</a> (same as <code>false</code>). (See: <a
     href="#binding22">binding style sheets</a>.)

    <dt><dfn id=allow-selectors-through
     title=attr-template-allow-selectors-through>allow-selectors-through</dfn>

    <dd>The <code title=attr-template-allow-selectors-through><a
     href="#allow-selectors-through">allow-selectors-through</a></code>
     attribute indicates whether or not rules in CSS can <a
     href="#selectors1" title="selectors and shadow scopes">cross scopes</a>.
     Its value must be either <code>true</code> (indicating that they can) or
     <code>false</code> (indicating that they cannot). The default behavior,
     which is used when the attribute is omitted or has a value other than
     the two allowed values, is to not let selectors cross scopes (same as
     <code>false</code>). (See: <a href="#selectors1">selectors and shadow
     scopes</a>.)
   </dl>

   <p class=note>The semantics of non-XBL elements inside this element are
    untouched, which can lead to unintuitive results. (See: <a
    href="#shadow10">semantics of non-XBL elements in XBL contexts</a>.)</p>

   <div class=example id=template-element-example>
    <p>The following binding defines a shadow tree that wraps the contents of
     the bound element in four blocks. It uses the <code
     title=attr-template-apply-author-sheets><a
     href="#apply-author-sheets">apply-author-sheets</a></code> attribute to
     allow the bound document to style the nodes directly, and uses the <code
     title=attr-template-allow-selectors-through><a
     href="#allow-selectors-through">allow-selectors-through</a></code>
     attribute to allow the bound document to pretend (for the purposes of
     selector matching) that the shadow tree actually is descended from the
     bound element.</p>

    <pre>&lt;xbl xmlns="http://www.w3.org/ns/xbl">
 &lt;binding id="wrapBy4">
  &lt;template apply-author-sheets="true" allow-selectors-through="true">
   &lt;div class="wrap1">
    &lt;div class="wrap2">
     &lt;div class="wrap3">
      &lt;div class="wrap4">
       &lt;content/>
      &lt;/div>
     &lt;/div>
    &lt;/div>
   &lt;/div>
  &lt;/template>
 &lt;/binding>
&lt;/xbl></pre>

    <p>Using this binding could take the following document:</p>

    <pre>&lt;html xmlns="http://www.w3.org/1999/xhtml">
 &lt;head>
  &lt;title>Pretty Title&lt;/title>
  &lt;style>
   h1 span { display: block; }
   h1 { border: solid red; }
   h1 .wrap1 { border: solid orange; }
   h1 .wrap2 { border: solid yellow; }
   h1 .wrap3 { border: solid green; }
   h1 .wrap4 { border: solid blue; }
  &lt;/style>
 &lt;/head>
 &lt;body>
  &lt;h1>
   &lt;span class="wrap1">
    &lt;span class="wrap2">
     &lt;span class="wrap3">
      &lt;span class="wrap4">
       Pretty Title
      &lt;/span>
     &lt;/span>
    &lt;/span>
   &lt;/span>
  &lt;/h1>
  ...
 &lt;/body>
&lt;/html></pre>

    <p>...and shrink it to this:</p>

    <pre>&lt;html xmlns="http://www.w3.org/1999/xhtml">
 &lt;head>
  &lt;title>Pretty Title&lt;/title>
  &lt;style>
   h1 { binding: url(cool.xml#wrapBy4); }
   h1 { border: solid red; }
   h1 .wrap1 { border: solid orange; }
   h1 .wrap2 { border: solid yellow; }
   h1 .wrap3 { border: solid green; }
   h1 .wrap4 { border: solid blue; }
  &lt;/style>
 &lt;/head>
 &lt;body>
  &lt;h1>Pretty Title&lt;/h1>
  ...
 &lt;/body>
&lt;/html></pre>

    <p>...which removes the semantic-free elements used as presentation hooks
     from the content markup layer, and places them in the presentation layer
     where they belong.</p>
   </div>

   <h3 id=the-content><span class=secno>2.5. </span>The <dfn
    id=content0><code>content</code></dfn> Element</h3>

   <dl>
    <dt>Expected context:

    <dd>Any, but there must be a <a href="#correct">correct</a> <code><a
     href="#template0">template</a></code> element somewhere in the ancestor
     chain, and there must not be any <code><a
     href="#content0">content</a></code> elements anywhere in the ancestor
     chain.

    <dt>Expected children:

    <dd>Anything.
   </dl>

   <div class=note>
    <p>The <code><a href="#content0">content</a></code> element is used
     inside <a href="#shadow5">shadow content</a> to specify where <a
     href="#explicit3">explicit children</a> that might already exist
     underneath the bound element are inserted into the <a
     href="#shadow7">shadow tree</a>. As far as the presentation model is
     concerned, any shadow content the binding places between the bound
     element and the <code><a href="#content0">content</a></code> elements is
     interleaved between the bound element and its <a
     href="#explicit3">explicit children</a> without affecting the document
     model.</p>

    <p>If the <code title=attr-content-includes><a
     href="#includes">includes</a></code> attribute has children of the bound
     element assigned to it, then those children are inserted into the <a
     href="#final0">final flattened tree</a> in place of the <code><a
     href="#content0">content</a></code> element. Otherwise, the child
     elements of the <code><a href="#content0">content</a></code> element are
     inserted into the <a href="#final0">final flattened tree</a> in place of
     the <code><a href="#content0">content</a></code> element instead. (See:
     <a href="#processing2">processing <code title="">content</code>
     elements</a>.)</p>
   </div>

   <h4 class="no-toc no-num" id=attributes8>Attributes</h4>

   <dl>
    <dt><dfn id=id4 title=attr-content-id>id</dfn>

    <dd>The <a href="#id13" title=attr-id><code>id</code> attribute</a>.

    <dt><dfn id=includes title=attr-content-includes>includes</dfn>

    <dd>The <code title=attr-content-includes><a
     href="#includes">includes</a></code> attribute can be used to indicate
     that only certain content should be placed at the <code><a
     href="#content0">content</a></code> element. Its value must be a valid
     <a href="#attributes21">selector</a>. (See: <a
     href="#processing2">processing <code title="">content</code>
     elements</a>.)

    <dt><dfn id=apply-binding-sheets
     title=attr-content-apply-binding-sheets>apply-binding-sheets</dfn>

    <dd>The <code title=attr-content-apply-binding-sheets><a
     href="#apply-binding-sheets">apply-binding-sheets</a></code> attribute
     indicates whether or not scoped style sheets loaded for an XBL binding
     are applied to a bound element's <a href="#explicit3">explicit
     children</a> (in addition to the bound element itself) that are inserted
     below this <code><a href="#content0">content</a></code> element when it
     is processed. Its value must be either <code>true</code> (indicating
     that they are) or <code>false</code> (indicating that they are not). The
     default behavior, which is used when the attribute is omitted or has a
     value other than the two allowed values, is that they are not applied
     (same as <code>false</code>). (See: <a href="#binding22">binding style
     sheets</a>.)

    <dt><dfn id=locked title=attr-content-locked>locked</dfn>

    <dd>The <code title=attr-content-locked><a
     href="#locked">locked</a></code> attribute indicates whether or not new
     children may be inserted below this <code><a
     href="#content0">content</a></code> element when it is processed. Its
     value must be either <code>true</code> (indicating that they may not) or
     <code>false</code> (indicating that they may). The default behavior,
     which is used when the attribute is omitted or has a value other than
     the two allowed values, is that they may be inserted (same as
     <code>false</code>). Elements already assigned to a <code><a
     href="#content0">content</a></code> element whose <code
     title=attr-content-locked><a href="#locked">locked</a></code> attribute
     is dynamically changed are not removed from that element. (See: <a
     href="#processing2">processing <code title="">content</code>
     elements</a>.)
   </dl>

   <div class=example id=content-element-example>
    <p>This sample extract from a binding document shows how to use the <code
     title=attr-content-includes><a href="#includes">includes</a></code>
     attribute to distribute children to different parts of a shadow content
     template.</p>

    <pre>&lt;xbl:xbl xmlns:xbl="http://www.w3.org/ns/xbl"
         xmlns:data="http://example.com/data-language">
 &lt;xbl:binding element="data|grid">
  &lt;xbl:template>
   &lt;xbl:div class="caption" xbl:attr="xbl:text=title"/>
   &lt;xbl:div class="outer-table">
    &lt;xbl:div class="columns">
     &lt;xbl:content includes="data|column">
      &lt;!-- default to have just one column if none are declared -->
      &lt;data:column/>
     &lt;/xbl:content>
    &lt;/xbl:div>
    &lt;xbl:div class="rows">
     &lt;xbl:content includes="data|heading"/>
     &lt;xbl:div class="body">
      &lt;xbl:content includes="data|row:not([hidden])"/>
     &lt;/xbl:div>
    &lt;/xbl:div>
   &lt;/xbl:div>
  &lt;/xbl:template>
  ...
 &lt;/xbl:binding>
 ...
&lt;/xbl:xbl></pre>

    <p>The above template would be used with markup such as the following:</p>

    <pre>&lt;data xmlns="http://example.com/data-language">
 ...
  &lt;grid title="The Lesser of Two Evils">
   &lt;column id="product" sort="alphabetic primary"/>
   &lt;column id="catchphrase" sort="alphabetic secondary"/>
   &lt;heading>
    &lt;item>Product&lt;/item>
    &lt;item>Catchphrase&lt;/item>
   &lt;/heading>
   &lt;row>
    &lt;item>Arachno Spores&lt;/item>
    &lt;item>The fatal spore with the funny name&lt;/item>
   &lt;/row>
   &lt;row>
    &lt;item>Pastorama&lt;/item>
    &lt;item>Located on the former site of Brooklyn&lt;/item>
   &lt;/row>
  &lt;/grid>
 ...
&lt;/data></pre>

    <p>The following illustrates how the above markup would get
     redistributed.</p>

    <p><img alt="The two column elements would get put under the div with
     class columns; the heading element and its descendants would end up at
     the start of the div with class rows, and the two row elements would end
     up under the div with class rows."
     src="images/content-element-example-explanation.png"></p>
   </div>

   <div class=example id=content-element-example-2>
    <p>In this example, the binding uses the <code
     title=attr-content-apply-binding-sheets><a
     href="#apply-binding-sheets">apply-binding-sheets</a></code> attribute
     to let its stylesheet affect the <a href="#explicit3">explicit
     children</a> of the bound element.</p>

    <pre>&lt;xbl xmlns="http://www.w3.org/ns/xbl"
     xmlns:ui="http://example.org/ui-language/">
 &lt;binding element="ui|listbox">
  &lt;template allow-selectors-through="true">
   &lt;div id="listbox-focus">
    &lt;content includes="ui|listitem" apply-binding-sheets="true"/>
   &lt;/div>
  &lt;/template>
  &lt;resources>
   &lt;style>
    @namespace xbl url(http://www.w3.org/ns/xbl);
    @namespace uil url(http://example.org/ui-language/);
    uil|listbox { display: block; background: white; color: black; }
    uil|listbox > xbl|div#listbox-focus { border: ridge silver; }
    uil|listbox:focus > xbl|div#listbox-focus { border: inset silver; }
    uil|listitem { display: block; background: white; color: black; }
    uil|listitem[selected] { display: block; background: navy; color: white;}
   &lt;/style>
  &lt;/resources>
  ...
 &lt;/binding>&lt;/xbl></pre>
   </div>

   <div class=example id=content-element-example-locked>
    <p>In the following example, the <code title=attr-content-locked><a
     href="#locked">locked</a></code> attribute is used to keep the children
     of the bound element in the location that the user has selected. By
     default, the <code title="">listitem</code> elements would be placed in
     the first <code><a href="#content0">content</a></code> element, but
     because it is locked, they will instead go into the second one.</p>

    <pre>&lt;xbl xmlns="http://www.w3.org/ns/xbl"
     xmlns:ui="http://example.org/ui-language/">
 &lt;binding element="ui|duallist">
  &lt;template>
   &lt;div>
    &lt;ui:listbox id="left" title="Selected Items">
     &lt;content includes="ui|listitem" locked="true" id="leftList"/>
    &lt;/ui:listbox>
   &lt;/div>
   &lt;div id="buttons">
    &lt;ui:button id="move-right"> Move Right &lt;/ui:button>
    &lt;ui:button id="move-left"> Move Left &lt;/ui:button>
   &lt;/div>
   &lt;div>
    &lt;ui:listbox id="right" title="Available Items">
     &lt;content includes="ui|listitem" id="rightList"/>
    &lt;/ui:listbox>
   &lt;/div>
  &lt;/template>
  &lt;implementation>
   ({
     xblBindingAttached: function() {
       this.shadowTree.getElementById('move-right').addEventListener(
         'click', this.moveRight, false
       );
       this.shadowTree.getElementById('move-left').addEventListener(
         'click', this.moveLeft, false
       );
     },
     moveRight: function(event) {
       this.shadowTree.getElementById('rightList').setInsertionPoint(
         this.shadowTree.getElementById('left').selectedElement
       );
     },
     moveLeft: function(event) {
       this.shadowTree.getElementById('leftList').setInsertionPoint(
         this.shadowTree.getElementById('right').selectedElement
       );
     },
   })
  &lt;/implementation>
 &lt;/binding>
&lt;/xbl></pre>
   </div>

   <h3 id=the-inherited><span class=secno>2.6. </span>The <dfn
    id=inherited0><code>inherited</code></dfn> Element</h3>

   <dl>
    <dt>Expected context:

    <dd>Any, but there must be a <a href="#correct">correct</a> <code><a
     href="#template0">template</a></code> element somewhere in the ancestor
     chain.

    <dt>Expected children:

    <dd>Anything.
   </dl>

   <p class=note>The <code><a href="#inherited0">inherited</a></code> element
    represents where the next inherited shadow tree is to be inserted. If the
    binding is the base binding (and thus has no inherited bindings) or if
    none of the bindings it inherits from have shadow trees, or if this is
    not the first <code><a href="#inherited0">inherited</a></code> element in
    the binding's shadow tree, then the contents of the <code><a
    href="#inherited0">inherited</a></code> element (if any) will be used
    instead. (See: <a href="#final0" title="final flattened tree">the final
    flattened tree</a>.)</p>

   <h4 class="no-toc no-num" id=attributes9>Attributes</h4>

   <dl>
    <dt><dfn id=id5 title=attr-element-id>id</dfn>

    <dd>The <a href="#id13" title=attr-id><code>id</code> attribute</a>.
   </dl>

   <p class=note>While it is legal to nest <code><a
    href="#inherited0">inherited</a></code> elements, it is pointless, since
    if one <code><a href="#inherited0">inherited</a></code> element used its
    fallback content, any subsequent such elements will too.</p>

   <div class=example id=inherited-element-example>
    <p>The following binding wraps the bound element's children in a set of
     <code><a href="#div0">div</a></code>s for extra styling. By using the
     <code><a href="#inherited0">inherited</a></code> element, it has been
     designed such that it must be used in conjunction with other bindings:
     it will (if applied after the others) wrap the shadow trees of those
     templates. Contrast this with <a href="#template-element-example">the
     example in the <code>template</code> section</a>, which would not
     interact with other bindings. However, if this binding is not applied in
     conjunction with a binding that has a <code><a
     href="#content0">content</a></code> element giving a place for the
     element's explicit children, then those children will not be in the
     final flattened tree.</p>

    <pre>&lt;xbl xmlns="http://www.w3.org/ns/xbl">
 &lt;binding id="wrapBy4">
  &lt;template apply-author-sheets="true" allow-selectors-through="true">
   &lt;div class="wrap1">
    &lt;div class="wrap2">
     &lt;div class="wrap3">
      &lt;div class="wrap4">
       &lt;inherited/>
      &lt;/div>
     &lt;/div>
    &lt;/div>
   &lt;/div>
  &lt;/template>
 &lt;/binding>
&lt;/xbl></pre>
   </div>

   <h3 id=the-xblattr><span class=secno>2.7. </span>The <dfn id=xblattr0
    title=attr-attr><code>xbl:attr</code></dfn> Attribute</h3>

   <dl>
    <dt>Expected element:

    <dd>Any, but there must be a <a href="#correct">correct</a> <code><a
     href="#template0">template</a></code> element somewhere in the ancestor
     chain.
   </dl>

   <p class=note>The <code title=attr-attr><a
    href="#xblattr0">xbl:attr</a></code> attribute is a global attribute in
    the XBL namespace that specifies which attributes on the bound element
    should be forwarded to the element on which the attribute is found when
    the shadow content template is cloned. It is a <a
    href="#attributes22">space-separated</a> list of <a href="#qname"
    title=QName>QNames</a> or <a href="#qname">QName</a> pairs separated by
    equal signs, each possibly suffixed by a hash character ("#") and a type
    designation. (See: <a href="#attribute1">attribute forwarding</a>.)</p>

   <p>The value of the <code title=attr-attr><a
    href="#xblattr0">xbl:attr</a></code> attribute must be a <a
    href="#attributes22">space-separated</a> value of items that match the
    pattern given in the <a href="#attribute1">attribute forwarding</a>
    section.</p>

   <div class=example id=inherits-attribute-example>
    <p>One of the major uses of the <code title=attr-attr><a
     href="#xblattr0">xbl:attr</a></code> attribute is to implement one
     element in terms of another element which already has special behavior
     in user agents. This example shows how a <code>ui:text</code> element
     can be implemented in terms of an <code>html:input</code> element, with
     certain attributes being forwarded to that element directly.</p>

    <pre>&lt;xbl:xbl xmlns:xbl="http://www.w3.org/ns/xbl"
         xmlns:ui="http://example.com/ui-language/"
         xmlns:html="http://www.w3.org/1999/xhtml">
 &lt;xbl:binding element="ui|text">
  &lt;xbl:template>
   &lt;html:label>
    &lt;html:span xbl:attr="xbl:text=label"/>
    &lt;html:input xbl:attr="value=default disabled readonly" id="input"/>
   &lt;/html:label>
  &lt;/xbl:template>
  &lt;xbl:implementation>
   ({
    get value () { return this.shadowTree.getElementById('input').value; },
    set value (val) { this.shadowTree.getElementById('input').value = val; },
   })
  &lt;/xbl:implementation>
 &lt;/xbl:binding>
&lt;/xbl:xbl></pre>
   </div>

   <h3 id=the-xblpseudo><span class=secno>2.8. </span>The <dfn id=xblpseudo0
    title=attr-pseudo><code>xbl:pseudo</code></dfn> Attribute</h3>

   <dl>
    <dt>Expected element:

    <dd>Any, but there must be a <a href="#correct">correct</a> <code><a
     href="#template0">template</a></code> element somewhere in the ancestor
     chain.
   </dl>

   <p class=note>The <code title=attr-pseudo><a
    href="#xblpseudo0">xbl:pseudo</a></code> attribute is a global attribute
    in the XBL namespace that specifies the <a
    href="#pseudo-element">pseudo-element</a> that, when used on the bound
    element, must be mapped to the element on which the attribute is found.</p>

   <p>The value of the <code title=attr-pseudo><a
    href="#xblpseudo0">xbl:pseudo</a></code> attribute must be a valid <a
    href="#pseudo-element">pseudo-element</a> name, in lowercase, without the
    leading "::". The valid pseudo-elements are defined by the CSS
    specifications, and are "value", "choices", "label", "repeat-item", and
    "icon". Future versions of CSS might introduce new values. (See: <a
    href="#matching1">matching pseudo-elements</a>.)</p>

   <div class=example id=pseudo-attribute-example>
    <p>The <code title=attr-pseudo><a
     href="#xblpseudo0">xbl:pseudo</a></code> attribute is useful as a way to
     let <a href="#author" title="author style sheets">author styles</a>
     affect the insides of a shadow tree without exposing the exact
     construction of the tree. Here, the binding represents a composite
     widget with an icon, a label, a text field, and some buttons.
     Pseudo-elements are used for each part allowing the author to style each
     part separately.</p>

    <pre>&lt;xbl:xbl xmlns:xbl="http://www.w3.org/ns/xbl"
         xmlns:html="http://www.w3.org/1999/xhtml">
 &lt;xbl:binding id="input-dialog">
  &lt;xbl:template>
   &lt;xbl:div class="root">
    &lt;xbl:div class="icon-block">
     &lt;html:img xbl:pseudo="icon" xbl:attr="src=icon alt=alt"/>
    &lt;/xbl:div>
    &lt;xbl:div xbl:pseudo="label" xbl:attr="xbl:text=label"/>
    &lt;xbl:div class="field-block">
     &lt;html:input xbl:pseudo="value" xbl:attr="value" id="field"/>
    &lt;/xbl:div>
    &lt;xbl:div class="buttons-block">
     &lt;html:button xbl:pseudo="choices" id="ok"> OK &lt;/html:button>
     &lt;html:button xbl:pseudo="choices" id="cancel"> Cancel &lt;/html:button>
    &lt;/xbl:div>
   &lt;/xbl:div>
  &lt;/xbl:template>
  ...
 &lt;/xbl:binding>
&lt;/xbl:xbl></pre>

    <p>An author-level stylesheet for a document using the binding might look
     like:</p>

    <pre>textDialog { binding: url(dialogs.xml#input-dialog); }
textDialog::value { background: white; color: black; }
textDialog::choices { border: outset; }</pre>
   </div>

   <h3 id=the-div><span class=secno>2.9. </span>The <dfn
    id=div0><code>div</code></dfn> Element</h3>

   <dl>
    <dt>Expected contexts:

    <dd><code><a href="#template0">template</a></code>

    <dd><code><a href="#content0">content</a></code>

    <dd><code><a href="#inherited0">inherited</a></code>

    <dd><code><a href="#div0">div</a></code>

    <dt>Expected children:

    <dd>Anything. Of particular interest, the <code><a
     href="#content0">content</a></code> and <code><a
     href="#inherited0">inherited</a></code> elements may occur as
     descendants, and non-XBL descendant elements may host <code
     title=attr-attr><a href="#xblattr0">xbl:attr</a></code> and <code
     title=attr-pseudo><a href="#xblpseudo0">xbl:pseudo</a></code>
     attributes.
   </dl>

   <p class=note>The <code><a href="#div0">div</a></code> element has no
    intrinsic meaning. It is intended to be used as a styling hook for
    presentational bindings.</p>

   <h4 class="no-toc no-num" id=attributes10>Attributes</h4>

   <dl>
    <dt><dfn id=id6 title=attr-div-id>id</dfn>

    <dd>The <a href="#id13" title=attr-id><code>id</code> attribute</a>.

    <dt><dfn id=class title=attr-div-class>class</dfn>

    <dd>A <a href="#attributes22">space-separated</a> list of keywords
     relevant to the element that could be useful as stylistic hooks. This is
     a "class" attribute (which means, for example, that the CSS "."
     shorthand can be used to match <code><a href="#div0">div</a></code>
     elements based on their <code>class</code> attribute). <span
     class=note>The <code title=attr-div-class><a
     href="#class">class</a></code> attribute doesn't apply to other XBL
     elements, only to <code><a href="#div0">div</a></code>.</span>

    <dt><dfn id=state title=attr-div-state>state</dfn>

    <dd>A free-form attribute with no predefined meaning that can be used as
     a stylistic hook, to store state, or for other purposes as desired by
     the binding author.

    <dt><dfn id=title title=attr-div-title>title</dfn>

    <dd>Text representing advisory information that the user agent should
     show to the user upon request (e.g., on a graphical browser, the
     contents of this attribute could be shown as a tooltip when the user
     indicates the element with a mouse pointer). <span class=note>The <code
     title=attr-div-title><a href="#title">title</a></code> attribute doesn't
     apply to other XBL elements, only to <code><a
     href="#div0">div</a></code>.</span>
   </dl>

   <p>The <code><a href="#div0">div</a></code> element in XBL is <em>not</em>
    the same element type as the <code><a href="#div0">div</a></code> element
    in HTML, but it is intended to be used in similar ways (and shares the
    name for that reason).</p>

   <div class=example id=div-element-example>
    <p>Many of the examples in this specification use the <code><a
     href="#div0">div</a></code> element.</p>

    <p>The following example uses the <code title=attr-div-state><a
     href="#state">state</a></code> attribute so that the CSS style sheet can
     render the shadow tree differently based on whether the switch that the
     binding represents is turned on or off.</p>

    <pre>&lt;xbl xmlns="http://www.w3.org/ns/xbl">
 &lt;binding id="switch">
  &lt;template>
   &lt;div class="wrapper">
    &lt;div id="main" state="off"/>
   &lt;/div>
  &lt;/template>
  &lt;handlers>
   &lt;handler event="click">
    this.shadowTree.getElementById('main').setAttribute('state',
      this.shadowTree.getElementById('main').getAttribute('state') == 'on' ?
      'off' : 'on');
   &lt;/handler>
  &lt;/handlers>
  &lt;resources>
   &lt;style>
    #main[state=off] { ... }
    #main[state=on] { ... }
   &lt;/style>
  &lt;/resources>
 &lt;/binding>
&lt;/xbl></pre>
   </div>

   <h3 id=the-handlers><span class=secno>2.10. </span>The <dfn
    id=handlers0><code>handlers</code></dfn> Element</h3>

   <dl>
    <dt>Expected context:

    <dd><code><a href="#binding16">binding</a></code>

    <dt>Expected children:

    <dd><code><a href="#handler0">handler</a></code>: zero or more.
   </dl>

   <div class=note>
    <p>The <code><a href="#handlers0">handlers</a></code> element's event
     handlers can be called for events that flow through the bound element.
     During capture, target, bubbling, and <a href="#the-default1"
     title="default phase">default</a> phases, when a given event is received
     by a bound element, if a corresponding event listener has been attached
     to the <code><a href="#handlers0">handlers</a></code> element, then the
     event will be <a href="#event12" title="event forwarding">forwarded</a>
     to that event listener. (See: <a href="#event12">event forwarding</a>,
     <a href="#binding17">binding attachment and detachment</a>.)</p>

    <p>Typically, event handlers are defined using <code><a
     href="#handler0">handler</a></code> elements.</p>
   </div>

   <h4 class="no-toc no-num" id=attributes11>Attributes</h4>

   <dl>
    <dt><dfn id=id7 title=attr-handlers-id>id</dfn>

    <dd>The <a href="#id13" title=attr-id><code>id</code> attribute</a>.
   </dl>

   <div class=example id=handlers-element-example>
    <p>The following example shows how <code><a
     href="#handlers0">handlers</a></code> can be used with any event
     listener mechanism.</p>

    <pre>&lt;xbl xmlns="http://www.w3.org/ns/xbl">
 &lt;binding id="test">
  &lt;handlers id="test-handlers"/>
  ...
 &lt;/binding>
 &lt;script>
  document.getElementById('test-handlers').addEventListener('click', function (event) {
    // this will get called for every click event that bubbles through 
    // any element that is bound to the "test" binding above.
    ...
  }, false);
 &lt;/script>
&lt;/xbl></pre>
   </div>

   <h3 id=the-handler><span class=secno>2.11. </span>The <dfn
    id=handler0><code>handler</code></dfn> Element</h3>

   <dl>
    <dt>Expected context:

    <dd><code><a href="#handlers0">handlers</a></code>

    <dt>Expected children:

    <dd>Depends on the scripting language.
   </dl>

   <p class=note>The <code><a href="#handler0">handler</a></code> element
    describes a single event handler. This handler is attached to its parent
    <code><a href="#handlers0">handlers</a></code> element, which is used as
    an event forwarding target when handling events on the bound element.
    (See: <a href="#event11">event handlers</a>.) It wraps a script that is
    executed when the event handler is matched.</p>

   <h4 class="no-toc no-num" id=attributes12>Attributes</h4>

   <dl>
    <dt><dfn id=id8 title=attr-handler-id>id</dfn>

    <dd>The <a href="#id13" title=attr-id><code>id</code> attribute</a>.

    <dt><dfn id=event9 title=attr-handler-event>event</dfn>

    <dd>The <code title=attr-handler-event><a href="#event9">event</a></code>
     attribute describes the specific event that this handler is listening
     for. (See: <a href="#registering1">registering event handlers with the
     <code>handler</code> element</a>.)

    <dt><dfn id=phase title=attr-handler-phase>phase</dfn>

    <dd>This attribute specifies the phase of the event flow that this
     handler should monitor. When specified, the value must be one of
     <code>capture</code>, <code>target</code>, <code>bubble</code>, or
     <code>default-action</code>. If <code>capture</code> is specified, then
     the event handler must only be fired during the capturing phase of event
     propagation. If <code>target</code> is specified, then the event handler
     must only be fired during the target phase. If
     <code>default-action</code> is specified, then the event handler must
     only be fired during the <a href="#the-default1">default phase</a> (if
     it occurs). Otherwise, the handler must only be fired during the
     bubbling phase. (See: <a href="#registering1">registering event handlers
     with the <code>handler</code> element</a>.)

    <dt><dfn id=trusted title=attr-handler-trusted>trusted</dfn>

    <dd>This attribute specifies whether the handler should be limited to <a
     href="#trusted0" title=event-trusted>trusted events</a>. When specified,
     it must have the value <code>true</code> or the value
     <code>false</code>. If <code>true</code> is specified, then the event
     handler must only be fired if the event's <code title=event-trusted><a
     href="#trusted0">trusted</a></code> attribute is true. Otherwise, the
     value of the <code title=event-trusted><a
     href="#trusted0">trusted</a></code> flag does not affect the event
     handler. (See: <a href="#registering1">registering event handlers with
     the <code>handler</code> element</a>.)

    <dt><dfn id=propagate title=attr-handler-propagate>propagate</dfn>

    <dd>The <code title=attr-handler-propagate><a
     href="#propagate">propagate</a></code> attribute specifies whether after
     processing all listeners at the current node, the event is allowed to
     continue on its path (either in the capture or the bubble phase). When
     specified, it must have the value <code title="">stop</code> or the
     value <code title="">continue</code>. If the value is <code
     title="">stop</code>, then propagation will be stopped, otherwise it
     won't. It has no effect if the <code title=attr-handler-phase><a
     href="#phase">phase</a></code> attribute has the value
     <code>default-action</code>. (See: <a href="#registering1">registering
     event handlers with the <code>handler</code> element</a>.)

    <dt><dfn id=default-action
     title=attr-handler-default-action>default-action</dfn>

    <dd>The <code title=attr-handler-default-action><a
     href="#default-action">default-action</a></code> attribute specifies
     whether after processing of all listeners for the event, the default
     action for the event (if any) should be performed or not. (See: <a
     href="#registering1">registering event handlers with the
     <code>handler</code> element</a>.)</dd>
    <!--XXX provide <handler method="foo"/> as a shortcut for <handler>foo(event)</handler> -->
    <!-- lexical constraints for filters are defined in filter sections -->

    <dt><dfn id=button title=attr-handler-button>button</dfn>

    <dd>The <code title=attr-handler-button><a
     href="#button">button</a></code> attribute imposes a <em>filter</em> on
     the handler. It is used with mouse handlers to specify a particular
     button. (See: <a href="#mouse1">mouse event handler filters</a>.)

    <dt><dfn id=click-count title=attr-handler-click-count>click-count</dfn>

    <dd>The <code title=attr-handler-click-count><a
     href="#click-count">click-count</a></code> attribute imposes a
     <em>filter</em> on the handler. It is used with mouse handlers to
     specify how many clicks must have occurred. (See: <a
     href="#mouse1">mouse event handler filters</a>.)

    <dt><dfn id=modifiers1 title=attr-handler-modifiers>modifiers</dfn>

    <dd>The <code title=attr-handler-modifiers><a
     href="#modifiers1">modifiers</a></code> attribute imposes a filter on
     key and mouse handlers. It is used with mouse and key handlers to
     specify particular modifier keys. (See: <a href="#mouse1">mouse event
     handler filters</a>, <a href="#key-event1">key event handler
     filters</a>, <a href="#modifiers2">modifiers</a>.)

    <dt><dfn id=key title=attr-handler-key>key</dfn>

    <dd>The <code title=attr-handler-key><a href="#key">key</a></code>
     attribute imposes a filter on key handlers. It is used with key handlers
     to specify which keys to listen for. (See: <a href="#key-event1">key
     event handler filters</a>.)

    <dt><dfn id=key-location
     title=attr-handler-key-location>key-location</dfn>

    <dd>The <code title=attr-handler-key-location><a
     href="#key-location">key-location</a></code> attribute imposes a filter
     on key handlers. It is used with key handlers to specify which keys to
     listen for. (See: <a href="#key-event1">key event handler filters</a>.)

    <dt><dfn id=text title=attr-handler-text>text</dfn>

    <dd>The <code title=attr-handler-text><a href="#text">text</a></code>
     attribute imposes a filter on text input handlers. It is used with text
     input handlers to specify which characters to listen for. (See: <a
     href="#text-input1">text input event handler filters</a>.)

    <dt><dfn id=prev-value title=attr-handler-prev-value>prev-value</dfn>

    <dd>The <code title=attr-handler-prev-value><a
     href="#prev-value">prev-value</a></code> attribute imposes a filter on
     mutation handlers. It is used with mutation handlers to specify what
     <code>prev-value</code> to listen for. (See: <a
     href="#mutation1">mutation event handler filters</a>.)

    <dt><dfn id=new-value title=attr-handler-new-value>new-value</dfn>

    <dd>The <code title=attr-handler-new-value><a
     href="#new-value">new-value</a></code> attribute imposes a filter on
     mutation handlers. It is used with mutation handlers to specify what
     <code>new-value</code> to listen for. (See: <a
     href="#mutation1">mutation event handler filters</a>)

    <dt><dfn id=attr-name title=attr-handler-attr-name>attr-name</dfn>

    <dd>The <code title=attr-handler-attr-name><a
     href="#attr-name">attr-name</a></code> attribute imposes a filter on
     mutation handlers. It is used with attribute mutation handlers to
     specify which attribute to listen to for changes. (See: <a
     href="#mutation1">mutation event handler filters</a>)

    <dt><dfn id=attr-change title=attr-handler-attr-change>attr-change</dfn>

    <dd>The <code title=attr-handler-attr-change><a
     href="#attr-change">attr-change</a></code> attribute imposes a filter on
     mutation handlers. It is used with attribute mutation handlers to
     specify the type of change to listen for. (See: <a
     href="#mutation1">mutation event handler filters</a>.)
   </dl>

   <p>If a <code><a href="#handler0">handler</a></code> element is marked
    (via the <code title=attr-xbl-script-type><a
    href="#script-type">script-type</a></code> attribute of the <code><a
    href="#xbl0">xbl</a></code> element) as being in a language that the UA
    does not support then the UA must <a href="#ignoring">ignore</a> it,
    meaning it must not be used for the event handler definitions of any
    binding.</p>

   <p>How UAs must handle nodes inside <code><a
    href="#handler0">handler</a></code> elements depends on the language
    used. (See: <a href="#loading6">loading and running scripts</a>, <a
    href="#event11">event handlers</a>.)</p>

   <p><code><a href="#handler0">handler</a></code> blocks are evaluated each
    time they are fired. Changes to the <code><a
    href="#handler0">handler</a></code> elements therefore take effect the
    next time the event is fired.</p>

   <div class=example id=handler-element-example>
    <p>The following binding implements a link which, when clicked once with
     the primary button and with no key modifiers, or, when focused and sent
     a keypress of the Enter key with no modifiers, will cause the link to be
     followed.</p>

    <p>It will only do this if the click or the keypress is a real event
     triggered by the user; it won't do it for events faked by script.
     However, if the event faked by script is a DOMActivate event, then it
     will follow the link, because the handler for the DOMActivate event
     doesn't check that the event is <a href="#trusted0"
     title=event-trusted>trusted</a>. (If it did, it would never fire,
     because the event is dispatched by the binding, and therefore is not
     trusted.)</p>

    <pre>&lt;xbl xmlns="http://www.w3.org/ns/xbl">
 &lt;binding id="events">
  &lt;handlers>
   &lt;handler event="click" phase="default-action"
            button="1" click-count="1" modifiers="none"
            trusted="true">
    this.activate();
   &lt;/handler>
   &lt;handler event="keypress" phase="default-action"
            key="Enter" modifiers="none"
            trusted="true">
    this.activate();
   &lt;/handler>
   &lt;handler event="DOMActivate" phase="default-action">
    if (event.target == this.boundElement)
      this.boundElement.ownerDocument.location.href = this.href;
   &lt;/handler>
  &lt;/handlers>
  ...
  &lt;!-- it is assumed that the implementation for this binding
       implements a .activate() method that fires the DOMActivate
       event on itself. -->
 &lt;/binding>
&lt;/xbl></pre>
   </div>

   <h3 id=the-resources><span class=secno>2.12. </span>The <dfn
    id=resources1><code>resources</code></dfn> Element</h3>

   <dl>
    <dt>Expected context:

    <dd><code><a href="#binding16">binding</a></code>

    <dt>Expected children (in any order):

    <dd><code><a href="#style2">style</a></code>: zero or more.

    <dd><code><a href="#prefetch0">prefetch</a></code>: zero or more.
   </dl>

   <p class=note>The <code><a href="#resources1">resources</a></code> element
    contains a list of style sheets to apply when using this binding, as well
    as a list of files (images, videos, sound files, etc) to optionally
    preload.</p>

   <h4 class="no-toc no-num" id=attributes13>Attributes</h4>

   <dl>
    <dt><dfn id=id9 title=attr-resources-id>id</dfn>

    <dd>The <a href="#id13" title=attr-id><code>id</code> attribute</a>.
   </dl>

   <h3 id=the-style><span class=secno>2.13. </span>The <dfn
    id=style2><code>style</code></dfn> Element</h3>

   <dl>
    <dt>Expected context:

    <dd><code><a href="#resources1">resources</a></code>

    <dt>Expected children:

    <dd>If the element has no <code title=attr-style-src><a
     href="#src0">src</a></code> attribute: depends on the styling language.

    <dd>If the element does have a <code title=attr-style-src><a
     href="#src0">src</a></code> attribute: none.
   </dl>

   <div class=note>
    <p>The <code><a href="#style2">style</a></code> element is used to
     specify a style sheet that is to be applied to the bound element and to
     the shadow content generated by the binding, as well as to any <a
     href="#explicit3">explicit children</a> (and their descendants) assigned
     to <code><a href="#content0">content</a></code> elements in the shadow
     content whose <code title=attr-content-apply-binding-sheets><a
     href="#apply-binding-sheets">apply-binding-sheets</a></code> attribute
     is set.</p>

    <p>The <code><a href="#style2">style</a></code> element in XBL never
     applies styles to elements in the bound document other than the bound
     element (and <a href="#apply-binding-sheets"
     title=attr-content-apply-binding-sheets>possibly its children</a>). It
     never affects any ancestors of the bound element, or any nodes in any
     other bindings or binding templates.</p>
   </div>

   <h4 class="no-toc no-num" id=attributes14>Attributes</h4>

   <dl>
    <dt><dfn id=id10 title=attr-style-id>id</dfn>

    <dd>The <a href="#id13" title=attr-id><code>id</code> attribute</a>.

    <dt><dfn id=media title=attr-style-media>media</dfn>

    <dd>The <code title=attr-style-media><a href="#media">media</a></code>
     attribute specifies the intended destination medium for style
     information. If specified, the value of the attribute must be a valid
     Media Query (<code title="">media_query</code> token). How the value of
     this attribute is interpreted is defined by Media Queries. If this
     attribute is not specified, then there is no restriction on which media
     the style sheet should be applied to (same as specifying
     <code>media="all"</code>). <a href="#refsMQ">[MQ]</a>

    <dt><dfn id=src0 title=attr-style-src>src</dfn>

    <dd>The <code title=attr-style-src><a href="#src0">src</a></code>
     attribute specifies the <a href="#attributes24">URI</a> to a resource of
     the type given by the XBL subtree's <code title=attr-xbl-style-type><a
     href="#style-type">style-type</a></code> attribute. If the attribute is
     specified, the contents of the element must be ignored (even if the
     resource could not be fetched or was of the wrong type). (See: <a
     href="#binding22">binding style sheets</a>.)
   </dl>

   <p>If a <code><a href="#style2">style</a></code> element is marked (via
    the <code title=attr-xbl-style-type><a
    href="#style-type">style-type</a></code> attribute of the <code><a
    href="#xbl0">xbl</a></code> element) as being in a language that the UA
    does not support, the UA must <a href="#ignoring">ignore</a> it.
    Similarly, if the <code><a href="#style2">style</a></code> element points
    (using the <code title=attr-style-src><a href="#src0">src</a></code>
    attribute) to a resource that is either unavailable, or not of the type
    specified by the <code title=attr-xbl-style-type><a
    href="#style-type">style-type</a></code> attribute of the <code><a
    href="#xbl0">xbl</a></code> element (or implied by its absence), then it
    is <a href="#in-error">in error</a> and the UA must <a
    href="#ignoring">ignore</a> it. In both cases, "ignoring it" means it
    must not be used to style anything.</p>

   <p>How UAs must handle nodes inside <code><a
    href="#style2">style</a></code> elements depends on the language used.
    (See: <a href="#binding22">binding style sheets</a>.)</p>

   <p>For a summary of the various ways that content can be styled in the
    presence of XBL, see the <a href="#styleSummary">styling summary
    section</a>.</p>

   <h3 id=the-prefetch><span class=secno>2.14. </span>The <dfn
    id=prefetch0><code>prefetch</code></dfn> Element</h3>

   <dl>
    <dt>Expected context:

    <dd><code><a href="#resources1">resources</a></code>

    <dt>Expected children:

    <dd>None.
   </dl>

   <p class=note>The <code><a href="#prefetch0">prefetch</a></code> element
    can be used to list resources that may be pre-loaded for performance
    reasons.</p>

   <p>Support for this element is optional. UAs may <a
    href="#ignoring">ignore</a> it.</p>

   <h4 class="no-toc no-num" id=attributes15>Attributes</h4>

   <dl>
    <dt><dfn id=id11 title=attr-prefetch-id>id</dfn>

    <dd>The <a href="#id13" title=attr-id><code>id</code> attribute</a>.

    <dt><dfn id=src1 title=attr-prefetch-src>src</dfn>

    <dd>A <a href="#attributes24">URI</a> to a resource (such as an image)
     that the binding might use later.
   </dl>

   <div class=example id=prefetch-element-example>
    <p>The following binding uses two images; it sets the source of an HTML
     <code>img</code> element programmatically to refer to those images. To
     increase the chance that the "green.png" image is available straight
     away when it is used, it uses a <code><a
     href="#prefetch0">prefetch</a></code> element and specifies that that
     image will be needed.</p>

    <pre>&lt;xbl xmlns="http://www.w3.org/ns/xbl"
     xmlns:html="http://www.w3.org/1999/xhtml">
 &lt;binding id="light">
  &lt;template>
   &lt;html:img id="l" src="red.png" alt=""/>
  &lt;/template>
  &lt;resources>
   &lt;prefetch src="red.png"/> &lt;!-- this one isn't necessary, since
    the UA will fetch this one as soon as it sees the &lt;html:img> element -->
   &lt;prefetch src="green.png"/>
  &lt;/resources>
  &lt;implementation>
   ({
      red: function() {
        this.shadowTree.getElementById('l').src = 'red.png';
      },
      green: function() {
        this.shadowTree.getElementById('l').src = 'green.png';
      },
   })
  &lt;/implementation>
 &lt;/binding>
&lt;/xbl></pre>

    <p>This binding might be used as follows:</p>

    <pre>&lt;!DOCTYPE HTML>
&lt;html>
 &lt;head>
  &lt;title>Light Demo&lt;/title>
  &lt;style>
   #light { binding: url(demo.xml#light); }
  &lt;/style>
 &lt;/head>
 &lt;body>
  &lt;p id="light">Red&lt;/p>
  &lt;p>
   &lt;input type="button" onclick="doRed()" value="red">
   &lt;input type="button" onclick="doGreen()" value="green">
  &lt;/p>
  &lt;script>
   var light = document.getElementById('light');
   function doRed() {
     light.textContent = "Red";
     if (light.red)
       // binding might not be applied, so only call the method if it is defined
       light.red();
   }
   function doGreen() {
     light.textContent = "Green";
     if (light.green) // same
       light.green();
   }
  &lt;/script>
 &lt;/body>
&lt;/html></pre>

    <p>Ok, so this example is a little far fetched. So are most of the
     examples in this spec. They're just examples!</p>
   </div>

   <h3 id=the-script><span class=secno>2.15. </span>The <dfn
    id=script2><code>script</code></dfn> Element</h3>

   <dl>
    <dt>Expected context:

    <dd><code><a href="#xbl0">xbl</a></code>

    <dt>Expected children:

    <dd>If the element has no <code title=attr-script-src><a
     href="#src2">src</a></code> attribute: depends on the scripting
     language.

    <dd>If the element does have a <code title=attr-script-src><a
     href="#src2">src</a></code> attribute: none.
   </dl>

   <p class=note>The <code><a href="#script2">script</a></code> element
    contains code that is executed when the XBL subtree is loaded. It can
    therefore be used to define helper functions used by the bindings.</p>

   <p>The <code><a href="#script2">script</a></code> element, when present,
    must either contain code in the language specified by the XBL subtree's
    <code title=attr-xbl-script-type><a
    href="#script-type">script-type</a></code> attribute, or have a <code
    title=attr-script-src><a href="#src2">src</a></code> attribute that
    points to a resource containing code in the language specified by the
    <code title=attr-xbl-script-type><a
    href="#script-type">script-type</a></code> attribute. The syntax and
    semantics of this code depend on the specific language. (See: <a
    href="#loading6">loading and running scripts</a>.)</p>

   <h4 class="no-toc no-num" id=attributes16>Attributes</h4>

   <dl>
    <dt><dfn id=id12 title=attr-script-id>id</dfn>

    <dd>The <a href="#id13" title=attr-id><code>id</code> attribute</a>.

    <dt><dfn id=src2 title=attr-script-src>src</dfn>

    <dd>The <code title=attr-script-src><a href="#src2">src</a></code>
     attribute specifies the <a href="#attributes24">URI</a> to a resource of
     the type given by the XBL subtree's <code title=attr-xbl-script-type><a
     href="#script-type">script-type</a></code> attribute. If the attribute
     is specified, the contents of the element must be ignored (even if the
     resource could not be fetched or was of the wrong type). (See: <a
     href="#loading6">loading and running scripts</a>.)
   </dl>

   <p>If an <code><a href="#script2">script</a></code> element is marked (via
    the <code title=attr-xbl-script-type><a
    href="#script-type">script-type</a></code> attribute of the <code><a
    href="#xbl0">xbl</a></code> element) as being in a language that the UA
    does not support, the UA must <a href="#ignoring">ignore</a> it.
    Similarly, if the <code><a href="#script2">script</a></code> element
    points (using the <code title=attr-script-src><a
    href="#src2">src</a></code> attribute) to a resource that is either
    unavailable, or not of the type specified by the <code
    title=attr-xbl-script-type><a href="#script-type">script-type</a></code>
    attribute of the <code><a href="#xbl0">xbl</a></code> element (or implied
    by its absence), then it is <a href="#in-error">in error</a> and the UA
    must <a href="#ignoring">ignore</a> it. In both cases, "ignoring it"
    means that the script must not be executed.</p>

   <p>How UAs must handle nodes inside <code><a
    href="#script2">script</a></code> elements depends on the language used.
    (See: <a href="#loading6">loading and running scripts</a>.)</p>

   <p><code><a href="#script2">script</a></code> blocks must be evaluated
    when their end-tag is parsed, or, for dynamically created elements, when
    they are first inserted into a document. This is the case whether or not
    the elements are <a href="#in-error">in
    error</a><!--[uncomment this is people
  demand more] (because script processing is not considered to be part
  of XBL processing)-->.
    Once evaluation has started, a <code><a href="#script2">script</a></code>
    block is dead and changes to its contents or attributes have no effect.</p>

   <h3 id=the-id><span class=secno>2.16. </span>The <dfn id=id13
    title=attr-id><code>id</code></dfn> Attribute of XBL Elements</h3>

   <dl>
    <dt>Expected element:

    <dd>Any element in the XBL namespace.
   </dl>

   <p class=note>The <code title=attr-id><a href="#id13">id</a></code>
    attribute assigns an identifier to an element.</p>

   <p>The given identifier must be unique in the <a href="#binding15">binding
    document</a>. The <code title=attr-id><a href="#id13">id</a></code>
    attribute is of type ID. <a href="#refsXML">[XML]</a>.</p>

   <p>If the attribute's value is the empty string, the attribute must not
    set an ID. Otherwise, the attribute's value must be treated as (one of)
    the element's ID(s).</p>

   <h2 id=binding><span class=secno>3. </span><dfn id=binding17>Binding
    Attachment and Detachment</dfn></h2>

   <p>Bindings can be attached and detached dynamically, using several
    mechanisms.</p>

   <p>Bindings must be attached as soon as the following conditions have all
    been met:</p>

   <ul>
    <li>it is known that the binding applies to the element,

    <li>the DOM <code>Element</code> object for the element has been created,
     and

    <li>the binding document defining the binding has loaded.
   </ul>

   <p>In particular, binding can happen before the element is inserted into
    its document.</p>

   <p>If the binding document was already loaded when the element was
    created, or when it became known that the element matched the binding
    (e.g. because the binding's <code title=attr-binding-element><a
    href="#element">element</a></code> attribute is mutated in a script),
    then the binding must be applied such that to any running scripts,
    notwithstanding those implementing <code><a
    href="#xblbindingattached">xblBindingAttached()</a></code> notification
    methods, it appears that the binding was applied immediately. When
    mutation events are to fire, they must fire <em>after</em> the binding
    being applied.</p>

   <p>If the binding document has yet to be (fully) loaded when it becomes
    known that the binding applies, then the user agent must wait until all
    running scripts have completed before attaching the binding.</p>
   <!-- XXX someone complained last time i used that term
  ("run to completion"), and suggested better text. In the WA1 spec, I
  think. Use that here. [in the thread-safe storage bit, iirc] -->
   
   <p class=note>If the binding attachment mechanism is the <code
    title="binding property"><a href="#binding18">'binding'</a></code>
    property, then it does not become known to the user agent that the
    binding applies (or does not apply) until the next time style resolution
    is performed. This specification does not define when style resolution
    happens.</p>
   <!-- XXX who does. HTML5? -->
   <div class=example>
    <p>Assume that <code title="">foo.xml</code> defines a binding that
     applies to all "<code title="">foo</code>" elements. The following
     script uses <code title=loadBindingDocument><a
     href="#loadbindingdocument">loadBindingDocument()</a></code> to ensure
     that <code title="">foo.xml</code> is loaded, then creates a <code
     title="">foo</code> element and uses it.</p>

    <pre>// load the binding document
document.loadBindingDocument('foo.xml'); // this is synchronous

// create an element &lt;foo>
var foo = document.createElement('foo'); // binds synchronously too
foo.myCustomMethod(); // calls the binding's implementation</pre>

    <p>Without the call to <code title=loadBindingDocument><a
     href="#loadbindingdocument">loadBindingDocument()</a></code>, if the
     binding document wasn't loaded yet the element wouldn't be bound
     straight away, and the last line would fail.</p>
   </div>

   <p>Bindings must be detached as soon as it is known that the binding no
    longer applies to the element. In the case of attachment using the '<code
    title="binding property"><a href="#binding18">binding</a></code>'
    property, this won't be until the next time style resolution is
    performed.</p>

   <p>When it becomes known that a binding is to be detached, it must happen
    such that to any running scripts it appears that the binding was removed
    immediately, except if the script in question is running as part of the
    last step of the binding attachment process, in which case the detachment
    happens after all the bindings being attached have had their methods
    called. (See: <a href="#binding19">binding attachment model</a>.)</p>
   <!-- XXX this contradicts what is said elsewhere; could make this
  work by saying "except if there is an xblFoo notification method
  running" or something -->
   
   <h3 id=the-bindings-are-ready><span class=secno>3.1. </span><dfn
    id=the-bindings-are-ready1>The Bindings-Are-Ready State</dfn></h3>

   <p>XBL implementations must have a <dfn
    id=bindings-are-ready>bindings-are-ready</dfn> counter (for each
    <code>Document</code>) that keeps track of when there are outstanding
    bindings to bind. This counter is set at the times given in the following
    sections. (It is not set for all kinds of attachments.)</p>

   <p>If the bound document is being parsed by the user agent, then, as soon
    as all the following conditions have been met, the user agent must fire
    an <dfn
    id=xbl-bindings-are-ready><code>xbl-bindings-are-ready</code></dfn> event
    on the document's root element. The conditions are:</p>

   <ul>
    <li> the document has finished parsing,

    <li> the <a href="#bindings-are-ready">bindings-are-ready</a> counter is
     at zero,

    <li> all bindings that are known to apply to elements have been
     completely applied, and

    <li> no scripts are running.
   </ul>

   <p>The event must use the <code>Event</code> interface, must bubble, must
    not be cancelable, and must not have a default action. <a
    href="#refsDOM3EVENTS">[DOM3EVENTS]</a></p>

   <p>Initially, the <a href="#bindings-are-ready">bindings-are-ready</a>
    counter must be set to zero.</p>

   <p>The bound document's <code>load</code> event must not fire until after
    the <code><a
    href="#xbl-bindings-are-ready">xbl-bindings-are-ready</a></code> event
    has fired. The <code><a
    href="#xbl-bindings-are-ready">xbl-bindings-are-ready</a></code> event
    must fire even in the complete absence of any use of XBL in the document.</p>

   <p>The <code><a
    href="#xbl-bindings-are-ready">xbl-bindings-are-ready</a></code> event
    must only fire once per document load.</p>

   <h3 id=attachment><span class=secno>3.2. </span><dfn id=attachment4
    title="attachment using binding">Attachment using <code
    title=binding>&lt;binding element=""&gt;</code></dfn></h3>

   <p>The simplest binding mechanism is the <code><a
    href="#binding16">binding</a></code> element's <code
    title=attr-binding-element><a href="#element">element</a></code>
    attribute. It declares which bindings should be attached to which
    elements. (See: <a href="#attributes21" title=selector>attributes
    containing selectors</a>, <a href="#element"
    title=attr-binding-element>the <code title="">binding</code>
    element</a>.)</p>

   <p>While an element matches the <code title=attr-binding-element><a
    href="#element">element</a></code> attribute of one or more of the
    <code><a href="#binding16">binding</a></code> elements that is <a
    href="#importing1" title=import>imported</a> into, or defined in, the
    element's document, the bindings defined by each such <code><a
    href="#binding16">binding</a></code> element must be bound to the
    element. This applies to all elements that are associated with a
    document, even when they have not yet been inserted into the document, or
    are not in the <a href="#final0">final flattened tree</a>.</p>

   <h4 id=importing><span class=secno>3.2.1. </span><dfn id=importing1
    title=import>Importing Binding Documents</dfn></h4>

   <p>There are two ways to import binding documents (and thus have their
    <code title=binding><a href="#binding16">&lt;binding
    element=""&gt;</a></code> bindings apply): <a href="#the-ltxblgt"
    title=xbl-pi>the <code>&lt;?xbl?&gt;</code> processing instruction</a>,
    and the <code><a
    href="#loadbindingdocument">loadBindingDocument()</a></code> method. The
    latter is defined in the section on the <code><a
    href="#documentxbl">DocumentXBL</a></code> interface.</p>

   <p><dfn id=the-ltxblgt title=xbl-pi>The <code>&lt;?xbl?&gt;</code>
    processing instruction</dfn> specifies a binding document to load. Any
    bindings <a href="#attachment4" title="attachment using binding">defined
    in that document</a> must be applied to matching elements in the document
    with the processing instruction.</p>

   <p><code>&lt;?xbl?&gt;</code> processing instructions that occur after the
    root element's start tag in the markup are <a href="#in-error">in
    error</a>. <code>&lt;?xbl?&gt;</code> PIs that are dynamically inserted
    through the DOM after the root element's start tag has been parsed or the
    root element has been attached to the document are <a href="#in-error">in
    error</a> too.</p>

   <p>A <code>&lt;?xbl?&gt;</code> processing instruction that is not <a
    href="#in-error">in error</a> according to the above must be parsed using
    the same syntax as the XML Stylesheet PI. <a
    href="#refsXMLSSPI">[XMLSSPI]</a> If there are any parse errors, then the
    entire processing instruction is <a href="#in-error">in error</a>.</p>

   <p>Otherwise, if it has an <dfn id=href
    title=attr-import-href><code>href</code></dfn> pseudo-attribute then it
    specifies the <a href="#attributes24">URI</a> of the binding document to
    import. If the URI cannot be resolved, or returns an error, or does not
    point to a resource with <span>an XML MIME type</span><!-- XXX
  xref -->,
    or has any other problem that makes it unusable, then the processing
    instruction is <a href="#in-error">in error</a>.</p>

   <p>If a processing instruction is <a href="#in-error">in error</a> (as
    described in the previous few paragraphs) then it must be ignored.</p>

   <p>Otherwise, the referenced document must be loaded (unless it has <a
    href="#loading5" title="loading external resources">already been
    loaded</a>), and any bindings defined by that document must be applied to
    matching elements in the document that contained the PI. Once loaded, the
    binding document is added to the <code><a
    href="#bindingdocuments">bindingDocuments</a></code> list of the document
    with the PI.</p>

   <p>Dynamic changes to <code>&lt;?xbl?&gt;</code> processing instructions
    must be ignored from an XBL standpoint.</p>

   <p>An imported binding document is <em>live</em>.</p>

   <p class=example>For example, if new <code><a
    href="#binding16">binding</a></code> elements are added to an imported
    binding document (via the DOM), then the new bindings are immediately
    applied to the document that had the PI importing that binding document.</p>

   <p>XBL bindings are always implicitly imported into the document in which
    they are defined.</p>

   <p>Whenever an <code>&lt;?xbl?></code> PI causes a binding document to be
    loaded, the document's <a
    href="#bindings-are-ready">bindings-are-ready</a> counter must be
    increased by one. Once the binding document is loaded, the counter must
    be decreased by one.</p>

   <div class=example>
    <p>An XBL subtree that defines some bindings is automatically imported in
     that document, so such mappings are always used. The following example
     demonstrates this.</p>

    <pre><strong>example.xml</strong>

&lt;...&gt;
 &lt;xbl xmlns="http://www.w3.org/ns/xbl" ...&gt;
  &lt;binding element="foo"&gt;
   ...
  &lt;/binding&gt;
  &lt;binding element="bar"&gt;
   ...
  &lt;/binding&gt;
 &lt;/xbl ...&gt;
 &lt;foo xmlns=""/&gt; &lt;!-- this will have a binding applied --&gt;
 &lt;bar xmlns=""/&gt; &lt;!-- this will have a binding applied --&gt;
&lt;/...&gt;
</pre>

    <p>If the binding definitions are in a separate file, then that file
     needs to be imported explicitly:</p>

    <pre><strong>widgets.xml</strong>

&lt;...&gt;
 &lt;xbl xmlns="http://www.w3.org/ns/xbl" ...&gt;
  &lt;binding element="foo"&gt;
   ...
  &lt;/binding&gt;
  &lt;binding element="bar"&gt;
   ...
  &lt;/binding&gt;
 &lt;/xbl ...&gt;
&lt;/...&gt;
</pre>

    <pre><strong>example.xml</strong>

<em>&lt;?xbl href="widgets.xml"?&gt;</em>
&lt;...&gt;
 &lt;foo/&gt; &lt;!-- bound --&gt;
 &lt;bar/&gt; &lt;!-- bound --&gt;
&lt;/...&gt;
</pre>

    <p>If a file imports some bindings and the file containing those bindings
     has its own <code>&lt;?xbl?&gt;</code> processing instructions, that
     second PI only affects nodes in the binding document, not the original
     document. For example:</p>

    <pre><strong>foo.xml</strong>

&lt;...&gt;
 &lt;xbl xmlns="http://www.w3.org/ns/xbl" ...&gt;
  &lt;binding element="foo"&gt;
   &lt;content&gt;
    &lt;bar xmlns=""/&gt; &lt;!-- not bound, not even when in shadow content --&gt;
   &lt;/content&gt;
  &lt;/binding&gt;
 &lt;/xbl&gt;
&lt;/...&gt;
</pre>

    <pre><strong>bar.xml</strong>

&lt;?xbl href="foo.xml"?&gt;
&lt;...&gt;
 &lt;xbl xmlns="http://www.w3.org/ns/xbl" ...&gt;
  &lt;binding element="bar"&gt;
   &lt;content&gt;
    &lt;foo xmlns=""/&gt; &lt;!-- bound: this document imports foo.xml --&gt;
    &lt;bar xmlns=""/&gt; &lt;!-- bound: bar binding is defined locally --&gt;
   &lt;/content&gt;
  &lt;/binding&gt;
 &lt;/xbl&gt;
&lt;/...&gt;
</pre>

    <pre><strong>example.xml</strong>

&lt;?xbl href="bar.xml"?&gt;
&lt;...&gt;
 &lt;foo/&gt; &lt;!-- not bound: foo.xml not imported here --&gt;
 &lt;bar/&gt; &lt;!-- bound --&gt;
&lt;/...&gt;
</pre>
   </div>

   <h3 id=attachment0><span class=secno>3.3. </span>Attachment using CSS</h3>

   <p>Bindings can be attached to elements through CSS using the '<code
    title="binding property"><a href="#binding18">binding</a></code>'
    property.</p>

   <div class=example>
    <p>In the following example, a binding is referenced that will be
     attached to all XHTML checkbox elements.</p>

    <pre>
input[type="checkbox"] {
  binding: url("http://www.example.org/xbl/htmlBindings.xml#checkbox");
}
</pre>
   </div>

   <p>Bindings attached through CSS must only remain on the bound element as
    long as the element continues to match the style rule. If at any time a
    resolution of style on the element determines that a different binding
    should be attached, the old binding (and all bindings that it explicitly
    extends in its <a href="#explicit1">explicit inheritance chain</a>) must
    be detached.</p>

   <p>Whenever an element is removed from a document, any bindings attached
    to that element via CSS must be detached.</p>

   <p class=note>Attaching a binding using CSS does not <a
    href="#importing1">import</a> the binding document. The <code
    title=attr-binding-element><a href="#element">element</a></code>
    attributes of <code><a href="#binding16">binding</a></code> elements in
    the binding document do not take effect unless the binding document is
    imported. (See: <a href="#importing1" title=import>importing binding
    documents</a>.)</p>

   <p>Attaching using CSS does not affect the <a
    href="#bindings-are-ready">bindings-are-ready</a> counter.</p>

   <h4 id=the-binding0><span class=secno>3.3.1. </span>The '<code
    title="binding property"><a href="#binding18">binding</a></code>'
    Property</h4>

   <p>A property to attach a binding to a particular element.</p>

   <table class=propdef id=binding6>
    <caption> <dfn id=binding18 title="binding
     property">'<code>binding</code>'</dfn></caption>

    <tbody>
     <tr>
      <td><em>Value:</em>

      <td>none | [ &lt;uri&gt; ]* &lt;uri&gt;
       <!--XXXPD &lt;predefined binding&gt;-->

     <tr>
      <td><em>Initial:</em>

      <td>none

     <tr>
      <td><em>Applies To:</em>

      <td>all elements (but not pseudo-elements)

     <tr>
      <td><em title="">Inherited:</em>

      <td>no

     <tr>
      <td><em>Percentages:</em>

      <td>n/a

     <tr>
      <td><em>Media:</em>

      <td>all

     <tr>
      <td><em>Computed Value:</em>

      <td>specified value, with URIs resolved to absolute URIs
   </table>

   <dl>
    <dt>none

    <dd>No bindings are to be attached through CSS.

    <dt>&lt;uri&gt;

    <dd>The specified binding is attached. More than one binding can be
     specified, resulting in the bindings being attached in the specified
     order, with the last binding implicitly inheriting from the previous
     one, and so forth, up to the first binding. (See: <a
     href="#binding20">binding inheritance</a>.)</dd>
    <!--XXXPB
   <dt>&lt;predefined binding&gt;</dt>
   <dd>One of the bindings defined in the <a
   href="#base-bindings">Predefined Base Bindings</a> section is
   attached.</dd>
-->
   </dl>

   <h4 id=processing><span class=secno>3.3.2. </span>Processing Model</h4>

   <p>User agents may perform the CSS cascade, inheritance, and computation
    stages either across the entire tree, or per element, or per property per
    element, and either before applying bindings, or simultaneously, while
    applying bindings. In any case, for each element the computed value of
    '<code title="binding property"><a href="#binding18">binding</a></code>'
    must be found and then used to apply the bindings to the element (when
    the element is first styled, and each subsequent time the styles that
    match the element change).</p>

   <p>Since each time a binding is applied it can change the computed values
    of properties of elements that are descendants of the bound element, this
    may require several passes. This may be avoided by computing the value of
    the '<code title="binding property"><a
    href="#binding18">binding</a></code>' property for the element, and then
    applying any bindings, before any of its descendants.</p>

   <h4 id=examples><span class=secno>3.3.3. </span>Examples</h4>

   <div class=example id=triangles-example>
    <p>The following XBL document defines two bindings for use in SVG. The
     first renders an isosceles triangle in place of bound elements that use
     it, the other renders a right-angled triangle in place of bound elements
     that use it.</p>

    <pre>&lt;xbl xmlns="http://www.w3.org/ns/xbl"
     xmlns:xbl="http://www.w3.org/ns/xbl">
 &lt;binding id="isosceles">
  &lt;template>
   &lt;polygon xbl:attr="transform" points="0 -1, 1 0, -1 0" xmlns="http://www.w3.org/2000/svg"/>
  &lt;/template>
 &lt;/binding>
 &lt;binding id="rightangle">
  &lt;template>
   &lt;polygon xbl:attr="transform" points="0 0, 1 0, 0 -1" xmlns="http://www.w3.org/2000/svg"/>
  &lt;/template>
 &lt;/binding>
&lt;/xbl></pre>

    <p>Assuming the above file was called <code>triangles.xml</code>, these
     bindings could be bound to elements using CSS like so:</p>

    <pre>@namespace triangles url(http://triangles.example.com/);
triangles|isosceles { binding: url(triangles.xml#isosceles); }
triangles|rightangle { binding: url(triangles.xml#rightangle); }</pre>

    <p>If the stylesheet was called <code>triangles.css</code>, an SVG file
     using these elements might look like:</p>

    <pre>&lt;?xml-stylesheet href="triangles.css"?>
&lt;svg xmlns="http://www.w3.org/2000/svg"
     xmlns:t="http://triangles.example.com/">
 &lt;circle cx="10" cy="10" r="5"/>
 &lt;rect x="20" y="20" height="5" width="10"/>
 &lt;t:isosceles transform="translate(10 20) scale(10)"/>
 &lt;t:rightangle transform="translate(20 20) scale(10)"/>
&lt;/svg></pre>

    <p>The same example could also be done all in one file like this:</p>

    <pre>&lt;svg xmlns="http://www.w3.org/2000/svg"
     xmlns:t="http://triangles.example.com/">
 &lt;defs>
  &lt;xbl xmlns="http://www.w3.org/ns/xbl"
       xmlns:xbl="http://www.w3.org/ns/xbl">
   &lt;binding id="isosceles">
    &lt;template>
     &lt;polygon xbl:attr="transform" points="0 -1, 1 0, -1 0" xmlns="http://www.w3.org/2000/svg"/>
    &lt;/template>
   &lt;/binding>
   &lt;binding id="rightangle">
    &lt;template>
     &lt;polygon xbl:attr="transform" points="0 0, 1 0, 0 -1" xmlns="http://www.w3.org/2000/svg"/>
    &lt;/template>
   &lt;/binding>
  &lt;/xbl>
  &lt;style type="text/css">
   @namespace triangles url(http://triangles.example.com/);
   triangles|isosceles { binding: url(#isosceles); }
   triangles|rightangle { binding: url(#rightangle); }
  &lt;/style>
 &lt;/defs>
 &lt;circle cx="10" cy="10" r="5"/>
 &lt;rect x="20" y="20" height="5" width="10"/>
 &lt;t:isosceles transform="translate(10 20) scale(10)"/>
 &lt;t:rightangle transform="translate(20 20) scale(10)"/>
&lt;/svg></pre>
   </div>

   <h3 id=attachment1><span class=secno>3.4. </span>Attachment using the DOM</h3>

   <p>Bindings can be attached to elements through the DOM using the <a
    href="#dom-interfaces"><code>ElementXBL</code></a> interface. The method
    <code><a href="#addbinding">addBinding</a></code> takes a binding URI and
    attaches the binding to the element (in all <a href="#view"
    title=view>views</a>).</p>

   <pre class="dom
    example">var checkbox = document.getElementById("mycheckbox");
checkbox.addBinding("http://www.example.org/xbl/htmlBindings.xml#checkbox");</pre>

   <p>This attachment is not necessarily synchronous. Scripts that invoke
    this method should not assume that the binding is installed immediately
    after this method returns. (An <code><a
    href="#xbl-bound">xbl-bound</a></code> event is fired when the binding is
    installed.)</p>

   <p>When a binding is attached using the DOM, it inherits from the current
    <a href="#most-derived">most derived binding</a> that is already attached
    to the element, if any. (See: <a href="#binding20">binding
    inheritance</a>.)</p>

   <p>Any bindings attached to an element using the <code><a
    href="#addbinding">addBinding()</a></code> method will remain on the
    element until the element is destroyed or a corresponding <code><a
    href="#removebinding">removeBinding()</a></code> call is made.</p>

   <p class=note>Attaching a binding using the <code><a
    href="#addbinding">addBinding()</a></code> DOM APIs does not <a
    href="#importing1">import</a> the binding document. The <code
    title=attr-binding-element><a href="#element">element</a></code>
    attributes of <code><a href="#binding16">binding</a></code> elements in
    the binding document do not take effect unless the binding document is
    imported. (See: <a href="#importing1" title=import>importing binding
    documents</a>.)</p>

   <p>Attaching using the <code><a href="#addbinding">addBinding()</a></code>
    API does not affect the <a
    href="#bindings-are-ready">bindings-are-ready</a> counter.</p>

   <h3 id=binding0><span class=secno>3.5. </span><dfn id=binding19>Binding
    Attachment Model</dfn></h3>

   <p>When a new binding is attached, the UA must perform the following steps
    in order (or act as if it did). Implementations may choose to suspend
    redraw during this process.</p>

   <ol>
    <li>If the binding has an <code title=attr-binding-extends><a
     href="#extends">extends</a></code> attribute, then the user agent must
     immediately consider the binding that the attributes references (if any)
     to apply to the bound element as well, and must attach that binding
     first, recursively applying these steps to that binding. If this causes
     a loop &mdash; that is, if a binding directly or indirectly derives from
     itself through a chain of one or more <code
     title=attr-binding-extends><a href="#extends">extends</a></code>
     attributes &mdash; then the user agent must only apply each binding in
     the chain once. (See: <a href="#explicit2">explicit inheritance</a>, <a
     href="#interpretation1">interpretation of URIs to XBL bindings</a>.)

    <li>If the binding has a template, the binding's shadow tree must be
     generated. This may cause other bindings to be applied synchronously, if
     their binding documents are already loaded. (See: <a
     href="#rules3">rules for shadow content generation</a>, <a
     href="#binding17">binding attachment and detachment</a>.)

    <li>If other bindings are already attached to the bound element, then the
     newly added binding will add a new <a href="#explicit1">explicit
     inheritance chain</a> to the element's list of bindings (its <a
     href="#implicit1">implicit inheritance chain</a>). (See: <a
     href="#implicit2">implicit inheritance</a>.)

    <li>If the new binding has an implementation, it must be made available
     to scripts. Language-specific constructors for the binding
     implementation must run at this point. (See: <a
     href="#binding23">binding implementations</a>.)

    <li>Events must start being routed through the binding's <code><a
     href="#handlers0">handlers</a></code> element, when there is one. (See:
     <a href="#event12">event forwarding</a>.)

    <li>If the new binding changes which shadow trees contribute to the <a
     href="#final0">final flattened tree</a> then the <a
     href="#explicit3">explicit children</a> must be redistributed. (See: <a
     href="#processing2">processing <code title="">content</code>
     elements</a>.)
   </ol>

   <p>The attachment process for the binding must then wait for the above
    steps to have been completed for all bindings that are known to apply to
    elements. When all the new bindings have reached this point, then, for
    each newly attached binding, the <code><a
    href="#xblbindingattached">xblBindingAttached()</a></code> method must be
    invoked on the binding's <a href="#implementation0">implementation</a>,
    immediately followed, if that bound element <a href="#is-in">is in a
    document</a>, by the invocation of the <code><a
    href="#xblentereddocument">xblEnteredDocument()</a></code> method.

   <p>The order that bindings on different bound elements have these methods
    called must be the relative tree order of all their bound elements, as
    returned by the <code>compareDocumentPosition()</code> function. In
    certain cases (e.g. bound elements in disconnected fragments), this order
    is implementation-specific; however, it must always be consistent with
    the return values of that function. <a
    href="#refsDOM3CORE">[DOM3CORE]</a></p>

   <p>The order that bindings on the same bound element have these methods
    called must be the derivation order, with less derived bindings being
    initialized before more derived bindings.</p>

   <p>After all the appropriate methods have been called, an <dfn
    id=xbl-bound title=xbl-bound><code>xbl-bound</code></dfn> event that
    bubbles, is not cancelable, has no default action, and uses the
    <code>Event</code> interface, must be fired on every bound element that
    just got bound, in the same order as their <code><a
    href="#xblbindingattached">xblBindingAttached()</a></code> methods were
    invoked. (See: <a href="#binding20">binding inheritance</a>.) <a
    href="#refsDOM3EVENTS">[DOM3EVENTS]</a></p>

   <p>If a binding stops applying to a document while the above steps are
    being applied, the binding is not removed until after the steps above
    have all been completed. Once they have been completed, any bindings that
    no longer apply must be detached. (See: <a href="#binding21">binding
    detachment model</a>.)</p>

   <h3 id=handling><span class=secno>3.6. </span><dfn id=handling3>Handling
    Insertion and Removal from the Document</dfn></h3>

   <p>A bound element <dfn id=is-in>is in a document</dfn> if it has a
    <code>Document</code> node as an ancestor, or it is in a shadow tree and
    that shadow tree's bound element is itself <a href="#is-in" title="is in
    a document">in a document</a>.</p>

   <p>When a bound element that is not <a href="#is-in" title="is in a
    document">in a document</a> is affected in such a way that it
    subsequently <a href="#is-in"><em>is</em> in a document</a>, then the
    <code><a href="#xblentereddocument">xblEnteredDocument()</a></code>
    method must be invoked on the binding's <a
    href="#implementation0">implementation</a>.</p>

   <p>Similarly in reverse: when a bound element that <a
    href="#is-in"><em>is</em> in a document</a> is affected in such a way
    that it subsequently is <em>not</em> <a href="#is-in" title="is in a
    document">in a document</a>, then the <code><a
    href="#xblleftdocument">xblLeftDocument()</a></code> method must be
    invoked on the binding's <a href="#implementation0">implementation</a>.</p>

   <p>These methods must be invoked as soon as the DOM is in a stable state,
    after any mutation events have fired, and after all running scripts have
    finished executing. If a bound element is removed and then reinserted
    into a document (or vice versa) during script execution, or while
    mutation events are being fired, the user agent must coalesce all the
    notifications into zero or one method calls (i.e. matching pairs of
    insertions and removals must not cause bindings to be notified).</p>
   <!-- XXX this needs work -->
   <h3 id=binding1><span class=secno>3.7. </span><dfn id=binding20>Binding
    Inheritance</dfn></h3>

   <p>Bindings can inherit from each other explicitly using the <code
    title=attr-binding-extends><a href="#extends">extends</a></code>
    attribute. They can also inherit from each other <em>implicitly</em> if
    multiple bindings are attached to an element.</p>

   <div class="figure example">
    <!-- Note: alt="" is correct for the following image, since the
        caption says everything the image says. -->
    
    <p><img alt="" src="images/attachment.gif"></p>

    <div class=caption>
     <p>The implicit inheritance link can be pictured as having several
      explicit chains adjacent to each other, with the implicit inheritance
      chain going down each explicit inheritance chain sequentially.</p>

     <p>Consider a case where seven bindings are defined, "a", which inherits
      from "b" which inherits from "c"; "d", which stands alone; and "e",
      which inherits from "f" which inherits from "g". If a bound element E
      is bound to "a", "b", "d", and "e" (with "e" bound last), then there
      would be nine bindings attached to E. Four of them would be explicitly
      bound, and five would be part of explicit inheritance chains from those
      four.</p>

     <p>In such an example, you would also get implicit inheritance from "g"
      to "d", from "d" to "b", and from one of the instances of "c" to "a".</p>
    </div>
   </div>

   <p>An <dfn id=explicit1>explicit inheritance chain</dfn> is a chain of
    bindings connected using the <code title=attr-binding-extends><a
    href="#extends">extends</a></code> attribute.</p>

   <p>An <dfn id=implicit1>implicit inheritance chain</dfn> is a chain of <a
    href="#explicit1" title="explicit inheritance chain">explicit inheritance
    chains</a>. There can be at most one <em>implicit</em> inheritance chain
    per bound element.</p>

   <p>A <dfn id=base-binding>base binding</dfn> is a binding that does not
    inherit from any other binding, either explicitly or implicitly. The base
    binding of a bound element is at one end of the bound element's implicit
    inheritance chain.</p>

   <p>A <dfn id=base-binding0>base binding of the explicit chain</dfn> is any
    binding that does not inherit explicitly from another, but may inherit
    implicitly from other bindings.</p>

   <p>A <dfn id=most-derived>most derived binding</dfn> is a binding that no
    other binding inherits from. The most derived binding of a bound element
    is the binding at the other end of the bound element's implicit
    inheritance chain from the base binding.</p>

   <p>If <var title="">B<sub title=""><var title="">i</var></sub></var> is
    the <var title="">i</var>th binding in a group of <var title="">N</var>
    chains, where <var title="">B<sub title="">1</sub></var> is the <a
    href="#base-binding">base binding</a> and <var title="">B<sub
    title=""><var title="">N</var></sub></var> is the <a
    href="#most-derived">most derived binding</a>, then <var title="">B<sub
    title=""><var title="">i</var>-1</sub></var> is the <dfn id=next->next
    most derived</dfn> binding of <var title="">B<sub title=""><var
    title="">i</var></sub></var>.</p>

   <p>In this specification, inheritance is represented as an arrow pointing
    to the binding that is being inherited. Thus, in the chain A&rarr;B, the
    A binding is the most derived binding, and the B binding is the next most
    derived binding, in this case also the base binding.</p>

   <p class=example>In the example above, the <em><a
    href="#base-binding">base binding</a></em> is the first "c", the four <em
    title="base binding of the explicit chain"><a href="#base-binding0">base
    bindings of the explicit chains</a></em> are "c", "c", "d", and "g", and
    the <em><a href="#most-derived">most derived binding</a></em> is "e".</p>

   <p class=note>The results of inheritance are described in the sections on
    <a href="#binding23">binding implementations</a> and <a
    href="#shadow5">shadow content</a>.</p>

   <h4 id=explicit><span class=secno>3.7.1. </span><dfn id=explicit2>Explicit
    Inheritance</dfn></h4>

   <p>The <code><a href="#binding16">binding</a></code> element's <code
    title=attr-binding-extends><a href="#extends">extends</a></code>
    attribute gives an explicit inheritance chain for a binding, ensuring
    that whenever the binding is bound to an element, the named binding also
    gets bound. (See: <a href="#binding19">binding attachment model</a>, <a
    href="#binding21">binding detachment model</a>.)</p>

   <p>The <code title=attr-binding-extends><a
    href="#extends">extends</a></code> attribute thus creates an <a
    href="#explicit1">explicit inheritance chain</a>.</p>

   <p>If a <code><a href="#binding16">binding</a></code> element's <code
    title=attr-binding-extends><a href="#extends">extends</a></code>
    attribute is changed, then, for each time the binding is bound to an
    element, the user agent must follow these steps:</p>

   <ol>
    <li>
     <p>Let <var title="">binding</var> be the instance of the binding that
      is attached to the bound element.</p>

    <li>
     <p>If <var title="">binding</var> is not <em>directly</em> attached to
      the bound element, but is instead attached to the bound element because
      another binding is inheriting from it using the <code
      title=attr-binding-extends><a href="#extends">extends</a></code>
      attribute, then let <var title="">binding</var> be <em>that</em>
      binding instead, and repeat this step.</p>

     <p>Otherwise, <var title="">binding</var> was attached to the bound
      element directly, and is not being inherited by another binding using
      the <code title=attr-binding-extends><a
      href="#extends">extends</a></code> attribute.</p>

    <li>
     <p>Detach <var title="">binding</var>. (See: <a
      href="#binding21">binding detachment model</a>.)</p>

    <li>
     <p>Attach a new instance of <var title="">binding</var> so that it is in
      the same place in the binding chain as the old instance was. (See: <a
      href="#binding19">binding attachment model</a>, <a
      href="#implicit2">implicit inheritance</a>.)</p>
   </ol>

   <p class=note>It is possible to form a loop with the <code
    title=attr-binding-extends><a href="#extends">extends</a></code>
    attribute. For example, a binding A can inherit from B which inherits
    from C which inherits from B again. The attachment algorithm is defined
    in a way that makes the loop stop as soon as a duplicate binding would be
    bound. In this case, the user agent will form a chain starting with A
    (the <a href="#most-derived">most derived binding</a>), derived from B,
    derived from C, with C as the <a href="#base-binding">base binding</a>
    (chain A&rarr;B&rarr;C). If, given the same definitions, the element was
    bound directly to C, then the chain would be C&rarr;B.</p>

   <h4 id=implicit><span class=secno>3.7.2. </span><dfn id=implicit2>Implicit
    Inheritance</dfn></h4>

   <p>When two bindings are both attached to the same element, the <a
    href="#base-binding0" title="base binding of the explicit chain">base
    binding</a> at the end of the <a href="#explicit1">explicit inheritance
    chain</a> of the second binding implicitly inherits from the <a
    href="#most-derived">most derived binding</a> of the explicit inheritance
    chain of the first.</p>

   <p>If one of the <a href="#explicit1" title="explicit inheritance
    chain">explicit inheritance chains</a> is removed, then the remaining
    binding chains are reconnected so that the <a href="#base-binding0">base
    binding of the explicit chain</a> after the break now inherits from the
    <a href="#most-derived">most derived binding</a> before the break.</p>

   <p>The order of bindings is always such that bindings added via the
    <code><a href="#binding16">binding</a></code> element are first (in the
    order the bindings are specified in the file, with the files, if there
    are more than one, ordered in the same order that they are referred to,
    traversed pre-order, depth-first), the bindings attached via CSS are
    second (in the order specified on the '<code title="binding property"><a
    href="#binding18">binding</a></code>' property), and the bindings added
    via <code><a href="#addbinding">addBinding</a></code> are third (in the
    order they were attached, most recently attached being the <a
    href="#most-derived">most derived binding</a>).</p>

   <div class=example>
    <p>For example, take a binding <em>d<sub>1</sub></em>, which specifies a
     base binding <em>d<sub>2</sub></em> using the <code
     title=attr-binding-extends><a href="#extends">extends</a></code>
     attribute such that its explicit inheritance chain is:</p>

    <p><em>d<sub>1</sub></em> &rarr; <em>d<sub>2</sub></em></p>

    <p>If binding <em>d<sub>1</sub></em> is attached to an element using
     <code><a href="#addbinding">addBinding</a></code> that already has a
     binding chain of:</p>

    <p><em>s<sub>1</sub></em> &rarr; <em>s<sub>2</sub></em> &rarr;
     <em>s<sub>3</sub></em></p>

    <p>...then the base binding at the end of the inheritance chain,
     <em>d<sub>2</sub></em>, is the one that will inherit from the most
     derived binding that is already attached to the element,
     <em>s<sub>1</sub></em>. The resulting binding chain following the
     addition of the binding is therefore:</p>

    <p><em>d<sub>1</sub></em> &rarr; <em>d<sub>2</sub></em> &rarr;
     <em>s<sub>1</sub></em> &rarr; <em>s<sub>2</sub></em> &rarr;
     <em>s<sub>3</sub></em></p>

    <p>The inheritance between <em>d<sub>2</sub></em> and
     <em>s<sub>1</sub></em> is <em>implicit</em>, meaning that there is no
     connection in the XBL subtrees between the two bindings. The inheritance
     link has been forged dynamically through the invocation of the <code><a
     href="#addbinding">addBinding</a></code> method.</p>
   </div>

   <p>An element can be bound to the same binding multiple times, in which
    case a binding can end up inheriting from itself. (This can only happen
    via implicit inheritance, though.)</p>

   <h4 id=mixing><span class=secno>3.7.3. </span>Mixing Implicit and Explicit
    Inheritance</h4>

   <div class=example id=mixed-inheritance-example>
    <p>Consider the following completely useless but short bindings:</p>

    <pre>&lt;xbl xmlns="http://www.w3.org/ns/xbl">
 &lt;binding id="a">
  &lt;template> l &lt;inherited> l &lt;content> o &lt;/content> - &lt;/inherited> W &lt;/template>
 &lt;/binding> 
 &lt;binding id="b" element="[X]" extends="#a">
  &lt;template> e &lt;inherited> error &lt;/inherited> o &lt;content> r &lt;/content> &lt;/template>
 &lt;/binding>
 &lt;binding id="c" element="[Y]">
  &lt;template> H &lt;inherited> error &lt;/inherited> l &lt;content> error &lt;/content> ! &lt;/template>
 &lt;/binding>
&lt;/xbl></pre>

    <p>When imported by the following equally silly but simple document:</p>

    <pre>&lt;?xbl href="test.xml"?>
&lt;root X="" Y=""> d &lt;/root></pre>

    <p>The resulting flattened tree would spell
     "H&nbsp;e&nbsp;l&nbsp;l&nbsp;o&nbsp;-&nbsp;W&nbsp;o&nbsp;r&nbsp;l&nbsp;d&nbsp;!".</p>

    <p>

    <p>The binding "c" that attaches because of the Y attribute implicitly
     inherits from the binding "b" that is bound because of the X attribute,
     and that latter binding explicitly inherits from the "a" binding. Since
     the "Y" binding has a <code><a href="#content0">content</a></code>
     element, the "d" explicit child node of the bound element ends up
     assigned to the <code><a href="#content0">content</a></code> element in
     the "Y" binding.</p>

    <p>The following table shows the source of each character:</p>

    <table>
     <tbody>
      <tr>
       <th> Output:

       <td> H

       <td> e

       <td> l

       <td> l

       <td> o

       <td> -

       <td> W

       <td> o

       <td> r

       <td> l

       <td> d

       <td> !

      <tr>
       <th> Source:

       <td> c

       <td> b

       <td> a

       <td> a

       <td> a

       <td> a

       <td> a

       <td> b

       <td> b

       <td> c

       <td> R

       <td> c
    </table>

    <p>...where R represents the bound document.</p>

    <p>The inheritance chain of the bindings attached to the <code
     title="">root</code> element in this example is:</p>

    <pre>c &rarr; b &rarr; a</pre>

    <p>...where the first arrow is an implicit inheritance, and the second is
     an explicit inheritance.</p>
   </div>

   <h3 id=views><span class=secno>3.8. </span>Views and Attachment</h3>

   <p>Only one set of bindings is attached to the document, and they must
    affect all views in a <a href="#view" title=view>multi-view UA</a>.
    Bindings attached via style sheets must be attached based on the style
    sheets that apply to the default view.</p>

   <h3 id=attachment2><span class=secno>3.9. </span>Attachment During
    Document Load</h3>

   <p>Binding loads are asynchronous. That is to say, when a binding is added
    (either via style sheet, script, or some other method), and the relevant
    <a href="#binding15">binding document</a> is not yet loaded, the load
    must be started in the background and the binding only attached once the
    binding document is available. An author can ensure that all bindings are
    synchronously attached by calling <code><a
    href="#loadbindingdocument">loadBindingDocument</a></code> to pre-fetch
    any binding documents that are required.</p>

   <p>The bound document must wait until all XBL dependencies have loaded
    before firing its <code title=event-load>load</code> event.</p>

   <h3 id=binding2><span class=secno>3.10. </span><dfn id=binding21>Binding
    Detachment Model</dfn></h3>

   <p>When a binding is detached, the <code><a
    href="#xblleftdocument">xblLeftDocument()</a></code> method must be
    invoked on the binding's <a href="#implementation0">implementation</a>.
    Then, the shadow tree must be removed, the implementation must be removed
    from the bound element's list of binding implementations, and any
    forwarding of events to the binding must be stopped for this bound
    element.</p>

   <p>If the binding had an <code title=attr-binding-extends><a
    href="#extends">extends</a></code> attribute when it was bound to the
    element (it may have changed since then, in which case the binding is
    being detached precisely for that reason), then the user agent must then
    detach the binding that was attached because of that attribute (if any).
    (See: <a href="#explicit2">explicit inheritance</a>, <a
    href="#interpretation1">interpretation of URIs to XBL bindings</a>.)

   <p>If the binding had a shadow tree, the explicit children must then be
    redistributed. (See: <a href="#processing2">processing <code
    title="">content</code> elements</a>.)</p>
   <!-- XXX need to define how this works when multiple bindings stop
  applying at once, and if they re-apply while being removed -->
   
   <h2 id=shadow><span class=secno>4. </span><dfn id=shadow5>Shadow
    Content</dfn></h2>

   <p>The subtree specified by the <code><a
    href="#template0">template</a></code> element is referred to as the <dfn
    id=shadow6>shadow content template</dfn>. This template describes a
    content tree that will be generated under the bound element during
    binding attachment. An element declared in a bound document using a
    single element can then be constructed out of multiple child elements,
    and this implementation is hidden from the bound document.</p>

   <p>A <dfn id=shadow7>shadow tree</dfn> is a tree of nodes created by
    cloning a binding's <a href="#shadow6">shadow content template</a>. A
    bound element can have zero, one, or more shadow trees. If a bound
    element has any, they are combined by the user agent, along with the
    element's <a href="#explicit3">explicit children</a>, to form the <a
    href="#final0">final flattened tree</a>. Shadow trees are hidden from
    normal DOM processing (hence the name "shadow"); they are not accessible
    via Core DOM navigation facilities such as <code>firstChild</code> or
    <code>nextSibling</code>. (See: <a href="#shadow5">shadow content</a>.)</p>

   <p>The term <dfn id=shadow8 title="">shadow content</dfn> refers to the
    various nodes in the shadow tree(s) of a bound element. Shadow content is
    created by cloning <a href="#shadow6" title="shadow content
    template">shadow content templates</a> during binding attachment.

   <div class=example>
    <p>For example, the HTML file upload control appears in most browsers as
     a composite widget consisting of a text field and a button. A sample XBL
     binding for the file widget might look as follows:</p>

    <pre>&lt;binding id="fileupload"&gt;
  &lt;template&gt;
    &lt;html:input type="text"/&gt;
    &lt;html:input type="button"/&gt;
  &lt;/template&gt;
&lt;/binding&gt;</pre>

    <p>Because this content is not visible to its parent element, it is said
     to be <em><a href="#shadow5">shadow content</a></em>.</p>
   </div>

   <p class=note>The file control is actually a special case. Due to security
    considerations, untrusted bindings will typically not be able to extend
    the file upload control in UAs intended for use with untrusted content.</p>

   <p>Whenever bindings are attached to an element, shadow content will
    potentially be <a href="#rules3" title="Rules for Shadow Content
    Generation">generated</a>. Similarly, when a binding is removed from an
    element, its shadow content, if any, is <a href="#rules4" title="Rules
    for Shadow Content Destruction">destroyed</a>.</p>

   <p>A shadow tree must be generated if a <code><a
    href="#template0">template</a></code> element is added to a <code><a
    href="#binding16">binding</a></code> element that had no <code><a
    href="#template0">template</a></code> element. If the <code><a
    href="#template0">template</a></code> element is removed, then the shadow
    tree must be destroyed.</p>

   <p>The <code><a href="#template0">template</a></code> element used to
    generate a binding is always the first such element in a <code><a
    href="#binding16">binding</a></code> element. If the <code><a
    href="#binding16">binding</a></code> element is mutated in a way which
    changes which <code><a href="#template0">template</a></code> element is
    the first, then the corresponding shadow tree must be <a
    href="#regenerating">regenerated</a>.</p>

   <p>Similarly, when a <code><a href="#template0">template</a></code>
    element or any of its descendants is mutated in any way, any bindings
    whose shadow tree was constructed from that element must be <a
    href="#regenerating">regenerated</a>.</p>

   <p><dfn id=regenerating title=regenerated>Regenerating a shadow tree</dfn>
    consists of first <a href="#rules4" title="Rules for Shadow Content
    Destruction">destroying</a> the existing shadow tree and then <a
    href="#rules3" title="Rules for Shadow Content Generation">generating</a>
    a new one.</p>

   <h3 id=rules><span class=secno>4.1. </span><dfn id=rules3>Rules for Shadow
    Content Generation</dfn></h3>

   <p>When a shadow tree is generated, user agents must act as follows:</p>

   <p>If the binding element has no <code><a
    href="#template0">template</a></code> element, then no shadow content
    will be generated for this binding.</p>

   <p>Otherwise, its first <code><a href="#template0">template</a></code>
    element must be deeply cloned.</p>

   <p>The <code>xml:base</code> data of the cloned <code><a
    href="#template0">template</a></code> element must be set so that the
    <code>baseURI</code> of nodes in the resulting shadow tree is the same as
    their pre-cloning counterparts. All shadow nodes'
    <code>ownerDocument</code> pointers are left pointing at their binding
    documents' <code>Document</code> node(s).</p>

   <p>No mutation events must be fired during the above steps.</p>

   <p>Any bindings that apply to elements in the shadow tree must be applied.</p>

   <p>For bindings with ECMAScript implementations: the <code><a
    href="#shadowtree">shadowTree</a></code> member of the <a
    href="#internal">internal object</a> must be set to be a reference to the
    <code><a href="#template0">template</a></code> element clone (the root of
    the shadow tree).</p>

   <p>The shadow tree is then <dfn id=applied>applied</dfn> to the bound
    element: the binding's shadow tree is placed in the appropriate place in
    the final flattened tree, <a href="#explicit3">explicit children</a> are
    (re)distributed to the appropriate <code><a
    href="#content0">content</a></code> elements, and the CSS cascade and
    inheritance is be computed along the new tree. (See: <a
    href="#processing2">processing <code title="">content</code>
    elements</a>.)</p>

   <p>After this point, further bindings may need to be applied, or certain
    bindings may need to be removed (because of CSS inheritance or because
    the selectors that decide which elements match which bindings can be
    affected by the shadow tree being associated with the bound element).</p>

   <p>Everything described in this section must be completed atomically
    &mdash; that is, the UA must not execute author scripts during this
    process.</p>

   <p class=note>Some implementations might optimize this algorithm, such as
    using "lazy evaluation" approaches and thereby postpone the cascade and
    inheritance operations.</p>

   <h3 id=rules0><span class=secno>4.2. </span><dfn id=rules4>Rules for
    Shadow Content Destruction</dfn></h3>

   <p>The destruction of a shadow tree consists of recreating the <a
    href="#final0">final flattened tree</a> without the influence of that
    binding's shadow tree by redistributing the <a href="#explicit3">explicit
    children</a> to the remaining shadow trees' <code><a
    href="#content0">content</a></code> elements (or, if there are none,
    putting the nodes back directly under the bound element).</p>

   <p>For bindings with ECMAScript implementations: the <code><a
    href="#shadowtree">shadowTree</a></code> member of the <a
    href="#internal">internal object</a> must be set to null.</p>

   <h3 id=attribute><span class=secno>4.3. </span><dfn
    id=attribute1>Attribute Forwarding</dfn></h3>

   <p>Attributes on shadow content elements can be tied to attributes on the
    bound element; then, whenever the attribute is set or removed on the
    bound element, the corresponding attribute on the shadow content is also
    set or removed. On any shadow content element, an <code
    title=attr-attr><a href="#xblattr0">xbl:attr</a></code> attribute can be
    used to specify a <a href="#attributes22">space-separated</a> list of
    attributes that should be inherited. Attributes with namespaces can be
    defined using a namespace prefix and the attribute name separate by a
    colon.</p>

   <div class=example>
    <p>For example, returning to the HTML file upload control example above,
     the shadow text field can be set up to automatically inherit the
     <code>value</code> attribute from the bound element.</p>

    <pre>&lt;xbl:binding id="fileUploadControl"&gt;
  &lt;xbl:template&gt;
    &lt;html:input type="text" xbl:attr="value"/&gt;
    &lt;html:input type="button" value="Browse..."/&gt;
  &lt;/xbl:template&gt;
&lt;/xbl:binding&gt;</pre>
   </div>

   <p>Each entry in the <code title=attr-attr><a
    href="#xblattr0">xbl:attr</a></code> list can either simply list an
    attribute (a <a href="#qname">QName</a>, such as <code>value</code> in
    the example above), or it can specify an <code>=</code>-separated pair of
    <a href="#qname" title=QName>QNames</a> consisting of the attribute on
    the shadow content that should be tied to the attribute on the bound
    element. When two names are specified, the attribute to be added on the
    shadow content node is listed first, and the attribute of the bound
    element is second.</p>

   <p>Each entry may also be suffixed by a single hash mark (#) followed by a
    <a href="#type-">type designation</a>.</p>

   <p>The <code title=attr-attr><a href="#xblattr0">xbl:attr</a></code>
    attribute's value must be parsed as follows. First, it must be split on
    spaces (treated as a <a href="#attributes22">space-separated</a> value).
    Next, each resulting item must be matched against the following pattern
    (given here in pseudo-BNF, where square brackets indicate optional
    terms):</p>

   <pre>xbl inherits item := [<var>s1</var> ':'] <var>s2</var> ['=' [<var>s3</var> ':'] <var>s4</var>] ['#' <var>s5</var>]</pre>

   <p>...where <var>s1</var>..<var>s5</var> are strings of characters not
    containing any of ":". "=", or "#".</p>

   <p>If any item does not match this pattern, then the item is <a
    href="#in-error">in error</a> and must be ignored. Other items in the
    list, if any, are not affected by this.</p>

   <p>The values <var>s1</var>:<var>s2</var> and <var>s3</var>:<var>s4</var>
    (if present) must be resolved to fully qualified names using the
    attribute <a href="#qname">QName</a> resolving semantics and the
    namespaces prefix declarations in scope on the element on which the <code
    title=attr-attr><a href="#xblattr0">xbl:attr</a></code> attribute is
    found, at the time that the attribute is parsed. Any value in the list
    that does not resolve to a fully qualified name is <a href="#in-error">in
    error</a> and must be ignored. <a href="#refsXMLNS">[XMLNS]</a></p>

   <p>Changes to namespace prefix definitions in the shadow tree that affect
    <a href="#qname" title=QName>QNames</a> used in <code title=attr-attr><a
    href="#xblattr0">xbl:attr</a></code> attributes take effect the next time
    the attribute is parsed (which must be the next time the attribute is
    changed, but may be earlier).</p>

   <h4 id=forwarding><span class=secno>4.3.1. </span>Forwarding to and from
    text nodes</h4>

   <p>The special value <dfn id=xbltext><code>xbl:text</code></dfn> can be
    used in an <code title="">=</code>-separated pair, where the prefix is
    associated with the XBL namespace. (The value is not a literal; it
    represents the fictional "text" attribute in the XBL namespace.)</p>

   <p>When specified on the left-hand side of the pair it indicates that the
    value of the attribute on the right-hand side are to be represented as
    text nodes underneath the shadow element in the <a href="#final0">final
    flattened tree</a>. If the element has any child nodes in the DOM (any
    nodes, including comment nodes, whitespace text nodes, or even empty
    CDATA nodes) then the pair is <a href="#in-error">in error</a> and UAs
    must ignore it, meaning the attribute value is not forwarded. Otherwise,
    a text node must be created, and that text node will be placed under the
    element in the final flattened tree.</p>

   <p>Text nodes created in this way are orphans; their
    <code>parentNode</code>, <code>nextSibling</code>,
    <code>previousSibling</code>, <code>childNodes</code>,
    <code>firstChild</code>, and <code>lastChild</code> attributes are all
    null or empty. Their <code>ownerDocument</code> attribute is set to the
    same as the shadow content node that generated them. (The only way one of
    these text nodes can be accessed is if the element is itself bound: the
    text node might then appear in a <code><a
    href="#content0">content</a></code> element's <code><a
    href="#xblchildnodes">xblChildNodes</a></code> list.)</p>

   <p>When used on the right-hand side, it indicates that any text nodes
    (including CDATA nodes and whitespace text nodes) that are <a
    href="#explicit3">explicit children</a> of the bound element must have
    their data concatenated and the resulting value stored as the attribute
    on the left-hand side.</p>
   <!--XXX use textContent instead? innerText?
  The HTML5 special version? -->
   
   <p>The <code><a href="#xbltext">xbl:text</a></code> value cannot occur by
    itself in the list. If it occurs by itself, it is <a href="#in-error">in
    error</a> and UAs must <a href="#ignoring">ignore</a> that value in the
    <a href="#attributes22">space-separated</a> list that is the <code
    title=attr-attr><a href="#xblattr0">xbl:attr</a></code> attribute.</p>

   <h4 id=forwarding0><span class=secno>4.3.2. </span>Forwarding language
    metadata</h4>

   <p>The special value <dfn id=xbllang><code>xbl:lang</code></dfn> can also
    be used in an <code title="">=</code>-separated pair. (Again, this is
    just the fictional "lang" attribute in the XBL namespace, not the literal
    string "xbl:lang", so the "xbl" prefix, or whatever prefix is used, must
    be declared as the XBL namespace.)</p>

   <p>When used on the right-hand side, it indicates that the value to be
    copied is the natural language of the bound element, typically given by
    the attribute <code>xml:lang</code> of that element or an ancestor, or by
    HTTP headers, or similar. If no language is defined, then the value to be
    copied must be the empty string.</p>

   <p>The <code><a href="#xbllang">xbl:lang</a></code> value cannot occur by
    itself or on the left-hand side. If it does, it is <a href="#in-error">in
    error</a> and UAs must <a href="#ignoring">ignore</a> that value in the
    element's <code title=attr-attr><a href="#xblattr0">xbl:attr</a></code>
    attribute.</p>

   <h4 id=error0><span class=secno>4.3.3. </span>Error handling</h4>

   <p>Any other values in the XBL namespace in the list are <a
    href="#in-error">in error</a> and must be <a href="#ignoring"
    title=ignore>ignored</a>. (In particular, trying to change or set the
    value of <code title=attr-pseudo><a
    href="#xblpseudo0">xbl:pseudo</a></code> or, worse, <code
    title=attr-attr><a href="#xblattr0">xbl:attr</a></code>, must not result
    in any changes to any attributes.)</p>

   <p>If an attribute is listed multiple times on the left hand side (or on
    its own), then the last designation wins (as if the attributes were each
    forwarded in turn, an earlier forwarding being overwritten by a later
    one).</p>

   <h4 id=type-specifiers><span class=secno>4.3.4. </span>Type specifiers</h4>

   <p>If the attribute or attribute pair is followed by a <dfn id=type->type
    designation</dfn>, in the form of a hash mark character ("#") and by a
    type name, then the value must be processed as described for its type
    below before being forwarded.</p>

   <dl>
    <dt>If the type is <dfn id=url title=type-url><code>url</code></dfn>

    <dd>The value must be resolved to an absolute URI using the base URI of
     the source element before being forwarded.

    <dt>If the type is <dfn id=text0 title=type-text><code>text</code></dfn>
     (default)

    <dd>The value is forwarded unchanged.

    <dt>If the type is any other value

    <dd>The attribute must not be forwarded. The value is <a
     href="#in-error">in error</a> and UAs must <a
     href="#ignoring">ignore</a> that value in the element's <code
     title=attr-attr><a href="#xblattr0">xbl:attr</a></code> attribute.
   </dl>

   <div class=example>
    <p>In the following shadow template, the "src" attribute on the bound
     element is forwarded to the "src" attribute on the <code>image</code>
     element in the shadow tree, and the link will work even if the original
     attribute had a relative URI and the base URIs of the various nodes are
     different:</p>

    <pre>
&lt;xbl:template&gt;
  &lt;xul:image xbl:attr="src#url title alt=xbl:text xml:lang=xbl:lang"/&gt;
&lt;/xbl:template&gt;
    </pre>

    <p>This example also shows how to turn the value of an attribute on the
     bound element, in this case the "alt" attribute, into child nodes of the
     element in the shadow tree, using <code><a
     href="#xbltext">xbl:text</a></code>. For accessibility reasons, the
     language of the element is also explicitly forwarded.</p>
   </div>
   <!-- XXX we need a way to translate x="foo" y="foo" to
  transform="translate(x,y)" and similar -->
   <!-- XXX we need a way to handle onfoo attributes on the bound
  element -->
   
   <h4 id=dynamic><span class=secno>4.3.5. </span>Dynamic changes</h4>

   <p>The <code title=attr-attr><a href="#xblattr0">xbl:attr</a></code>
    attribute must be parsed when the binding is first applied and whenever
    the attribute's value changes. It must be applied (causing the relevant
    attributes and text nodes to be updated) when the shadow tree is
    generated, when the attribute is changed, and whenever any of the bound
    element's attributes or text nodes referred to by the <code
    title=attr-attr><a href="#xblattr0">xbl:attr</a></code> attribute change.</p>

   <h4 id=how-attribute><span class=secno>4.3.6. </span>How Attribute
    Forwarding Affects the Shadow Tree</h4>

   <p>The element to which the attributes are forwarded (that is, the element
    with the <code title=attr-attr><a href="#xblattr0">xbl:attr</a></code>
    attribute specified) has its attributes mutated. Whenever attribute
    forwarding happens: existing attributes to which values are being
    forwarded must have their values changed, attributes that are being
    forwarded that do not yet exist on the shadow tree element must be added
    to the shadow tree element, attributes to which values would be forwarded
    but whose source attributes are not present on the bound element must be
    removed from the shadow tree element.</p>

   <p>The shadow tree element's attributes can be changed dynamically, and
    this doesn't affect the attribute forwarding, until dynamic changes cause
    attribute forwarding to be performed again. When attribute forwarding is
    performed, all attributes are forwarded, even those that haven't changed
    on the bound element, thus blowing away any dynamic changes to the shadow
    tree element's attributes that are referenced by the <code
    title=attr-attr><a href="#xblattr0">xbl:attr</a></code> attribute.</p>

   <h3 id=processing0><span class=secno>4.4. </span><dfn
    id=processing2>Processing <code>content</code> Elements</dfn></h3>

   <p>A node is said to match a <code><a href="#content0">content</a></code>
    element when the <code><a href="#content0">content</a></code> element has
    no <code title=attr-content-includes><a
    href="#includes">includes</a></code> attribute, or when the element in
    question matches the selector given by that <code
    title=attr-content-includes><a href="#includes">includes</a></code>
    attribute.</p>

   <p>If an element stops matching a <code><a
    href="#content0">content</a></code> element that it is assigned to, then
    the bound element's explicit chlidren must be redistributed.</p>

   <h4 id=how-nodes><span class=secno>4.4.1. </span>How Nodes are Distributed</h4>

   <p><img alt="" class=extra src="images/xbl_image_1.gif">XBL bindings can
    interleave shadow content between bound elements and their <a
    href="#explicit3">explicit children</a>. They do so using XBL's <code><a
    href="#content0">content</a></code> element. Any number of <code><a
    href="#content0">content</a></code> nodes may be used in a binding's
    shadow content template.</p>

   <p>In addition, the shadow trees of inherited bindings get inserted into
    the first <code><a href="#inherited0">inherited</a></code> element in the
    binding.</p>

   <p>The <dfn id=explicit3>explicit children</dfn> of an element are the
    nodes that are listed in the element's <code>childNodes</code> array,
    with the exception that any <code><a href="#content0">content</a></code>
    elements in that array are instead replaced by whatever nodes they
    currently have assigned to them, or, if no nodes are assigned to that
    <code><a href="#content0">content</a></code> element, by the child nodes
    of that <code><a href="#content0">content</a></code> element. If an
    element's <code>childNodes</code> list is empty but the element has an
    <code title=attr-attr><a href="#xblattr0">xbl:attr</a></code> attribute
    that uses the <code><a href="#xbltext">xbl:text</a></code> value on the
    left hand side in a way that is not <a href="#in-error">in error</a> then
    its "explicit children" is the text node generated during <a
    href="#attribute1">attribute forwarding</a>.</p>

   <div class=example>
    <p>Consider the following simple document:</p>

    <pre>&lt;X&gt;&lt;A/&gt;&lt;/X&gt;</pre>

    <p>Now, if the element X in that document is bound to a binding with the
     following shadow tree template:</p>

    <pre>&lt;template&gt;
 &lt;my:T&gt;
  &lt;my:P/&gt;
  &lt;content/&gt;
  &lt;my:Q/&gt;
 &lt;/my:T&gt;
&lt;/template&gt;</pre>

    <p>The explicit children of the <code>T</code> element, ignoring
     whitespace nodes, are, in order, <code>P</code>, <code>A</code>, and
     <code>Q</code>. This is because the children of <code>T</code> are
     <code>P</code>, a <code><a href="#content0">content</a></code> element,
     and <code>Q</code>, and the <code><a href="#content0">content</a></code>
     element has just one node associated with it, namely the <code>A</code>
     element.</p>
   </div>

   <p>When the <a href="#explicit3">explicit children</a> are distributed and
    assigned to the <code><a href="#content0">content</a></code> elements in
    the bound element's shadow trees, the <code
    title=attr-content-includes><a href="#includes">includes</a></code>
    attribute determines which <code><a href="#content0">content</a></code>
    element a given child is to be placed under.</p>

   <p>If no <code title=attr-content-includes><a
    href="#includes">includes</a></code> attribute is specified, a <code><a
    href="#content0">content</a></code> element is considered generic and
    will match on all content, including text nodes, CDATA nodes, comments,
    and so on.</p>

   <p>If the <code title=attr-content-includes><a
    href="#includes">includes</a></code> attribute is specified, it must be
    interpreted as a <a href="#attributes21">selector</a>, and only elements
    that <a href="#selectors1" title="selectors and shadow scopes">match the
    selector</a> apply to that <code><a href="#content0">content</a></code>
    element. If the selector is invalid, the <code><a
    href="#content0">content</a></code> element is <a href="#in-error">in
    error</a> and does not match any nodes. Matching of the elements to the
    selector is done without taking into account the shadow tree in which the
    <code><a href="#content0">content</a></code> element itself is found. <a
    href="#refsSELECTORS">[SELECTORS]</a></p>

   <p>Each node that is to be distributed (each <a href="#explicit3"
    title="explicit children">explicit child node</a>) must be assigned to a
    <code><a href="#content0">content</a></code> element as follows:</p>

   <ol>
    <li>If the node is already assigned to a <code><a
     href="#content0">content</a></code> element for this binding, and the
     <code><a href="#content0">content</a></code> element is <a
     href="#locked" title=attr-content-locked>locked</a>, then that is the
     <code><a href="#content0">content</a></code> element to which the node
     must be assigned, stop here.

    <li>Otherwise: if the node is already assigned to a <code><a
     href="#content0">content</a></code> element for this binding, unassign
     it.

    <li>Let <var>T</var> be the shadow tree of the <span>most derived</span>
     binding with a shadow tree for the bound element.

    <li>If <var>T</var> contains a <a href="#correct">correct</a> <code><a
     href="#content0">content</a></code> element that is not <a
     href="#locked" title=attr-content-locked>locked</a> and to which the
     node in question applies, then the first such element in a depth-first,
     pre-order traversal of the shadow tree <var>T</var> is the <code><a
     href="#content0">content</a></code> element to which the node must be
     assigned, stop here.

    <li>Otherwise, if this binding has no <a href="#correct">correct</a>
     <code><a href="#inherited0">inherited</a></code> element in its shadow
     tree, then the node is not assigned to a <code><a
     href="#content0">content</a></code> element, and does not appear in the
     <a href="#final0">final flattened tree</a>; stop here.

    <li>Otherwise, if the binding has a <a href="#correct">correct</a>
     <code><a href="#inherited0">inherited</a></code> element in its shadow
     tree but it is the least derived binding with a shadow tree, then the
     node is not assigned to a <code><a href="#content0">content</a></code>
     element, and does not appear in the <a href="#final0">final flattened
     tree</a>; stop here.

    <li>Otherwise, let <var>T</var> be the shadow tree of the <a
     href="#next-">next most derived</a> binding with a shadow tree and
     return to step 4.
   </ol>

   <p>The <a href="#explicit3">explicit children</a> must be processed in
    order, so if two nodes are assigned to a <code><a
    href="#content0">content</a></code> element, their order in the <code><a
    href="#xblchildnodes">xblChildNodes</a></code> list is the same as their
    relative order in the <a href="#explicit3">explicit children</a> list.</p>

   <div class=example>
    <p>Consider the following simple document:</p>

    <pre>&lt;X&gt;&lt;A/&gt;&lt;B/&gt;&lt;C/&gt;&lt;/X&gt;</pre>

    <p>Imagine that the element X in that document is bound to a binding with
     the following shadow tree template:</p>

    <pre>&lt;template&gt;
 &lt;my:T&gt;
  &lt;my:M/&gt;
  &lt;content/&gt;
  &lt;my:N/&gt;
 &lt;/my:T&gt;
&lt;/template&gt;</pre>

    <p>Imagine further that the element T is itself bound to a binding with
     the following template:</p>

    <pre>&lt;template&gt;
 &lt;my:R&gt;
  &lt;content includes="N"/&gt;
  &lt;content includes="B"/&gt;
 &lt;/my:R&gt;
&lt;/template&gt;</pre>

    <p>The resulting <a href="#final0">final flattened tree</a> would be:</p>

    <pre> X
 |
 `-- T
     |
     `-- R
         |
         +-- N
         |
         `-- B</pre>

    <p>In this example, there are two selectors, "N" and "B", both of which
     match just elements with the given local name.</p>
   </div>

   <h4 id=when-nodes><span class=secno>4.4.2. </span>When Nodes Are
    Redistributed</h4>

   <p>The algorithm described in the previous section is applied when:</p>

   <ul>
    <li><a href="#rules3" title="Rules for Shadow Content Generation">A
     shadow tree is generated</a>.

    <li><a href="#rules4" title="Rules for Shadow Content Destruction">A
     shadow tree is destroyed and the bound element still has bindings with
     shadow trees</a>.

    <li><a href="#handling4" title="Handling DOM Changes">The bound element
     has explicit children added, removed, or moved</a>.

    <li><a href="#handling4" title="Handling DOM Changes">A shadow tree is
     modified in a way that affects the relative order of
     <code>content</code> elements or their <code
     title=attr-content-includes>includes</code> attributes</a>.

    <li><a href="#handling4" title="Handling DOM Changes">An <code
     title=attr-content-includes>includes</code> attribute in the shadow tree
     is mutated</a>.

    <li><a href="#processing2" title="Processing content Elements">One or
     more of the nodes assigned to a <code>content</code> element in a shadow
     tree no longer match the element's <code
     title=attr-content-includes>includes</code> attribute.</a></li>
    <!-- XXXX the shadow tree is regenerated, e.g. template descendants
   are modified -->
   </ul>

   <div class=example>
    <p>Consider the following binding shadow tree:</p>

    <pre>&lt;template&gt;
 &lt;div&gt;As: &lt;content includes="A, AA"/&gt;&lt;/div&gt;
 &lt;div&gt;Other: &lt;content/&gt;&lt;/div&gt;
&lt;/template&gt;</pre>

    <p>If an element is bound to this binding while it has three child
     elements A, AA, and B, then the A and AA elements would end up under the
     first <code><a href="#content0">content</a></code> element, and the B
     element would end up under the second <code><a
     href="#content0">content</a></code> element. But if the <code
     title=attr-content-includes><a href="#includes">includes</a></code>
     attribute of the first <code><a href="#content0">content</a></code>
     element in the shadow tree was then dynamically modified to just have
     the value "<code title="">A</code>", then the AA element would be
     reassigned to the second <code><a href="#content0">content</a></code>
     element.</p>
   </div>

   <h3 id=the-final><span class=secno>4.5. </span>The <dfn id=final0>Final
    Flattened Tree</dfn></h3>

   <p>The final flattened tree is the view of the document and shadow trees
    after XBL has been fully applied. It is only used for two things:</p>

   <dl>
    <dt>Rendering

    <dd>Rendering must be performed using the final flattened tree. Nodes
     that do not appear in the final flattened tree must not be rendered.
     (See: <a href="#css-property1">CSS property inheritance and
     rendering</a>.)

    <dt>Event dispatch

    <dd>Events flow along the final flattened tree. (See: <a
     href="#event13">event flow and targeting across shadow scopes</a>.)
   </dl>

   <p>All other processing continues to use the DOM Core tree. (See: <a
    href="#shadow10" title="Semantics of non-XBL elements in XBL
    contexts">shadow content and other things</a>.)</p>

   <p>The final flattened tree must be constructed by taking the bound
    document's core DOM tree and performing the equivalent of the following
    steps on each bound element, until there are no more bound elements in
    the tree that have not been processed:</p>

   <ol>
    <li>If the bound element has no shadow trees, move on to the next bound
     element.

    <li>Otherwise, replace the child nodes of the bound element with the
     child nodes of the most derived shadow tree's root <code><a
     href="#template0">template</a></code> element.

    <li>For any element in the shadow tree that has an <code
     title=attr-attr><a href="#xblattr0">xbl:attr</a></code> attribute that
     uses the <code><a href="#xbltext">xbl:text</a></code> value on the left
     hand side in a way that is not <a href="#in-error">in error</a>, let the
     element's only child node be the attribute-forwarding text node. (If the
     element in question has any child nodes, then the <code><a
     href="#xbltext">xbl:text</a></code> value will be <a href="#in-error">in
     error</a>.)

    <li>Replace any <code><a href="#content0">content</a></code> elements in
     the shadow tree with the nodes that were assigned to them in the <a
     href="#processing2" title="Processing content Elements">previous
     section</a>, unless there are no such nodes, in which case replace them
     with their child nodes.

    <li>Replace the second and subsequent <code><a
     href="#inherited0">inherited</a></code> elements in the shadow tree with
     their child nodes.

    <li>Replace the first <code><a href="#inherited0">inherited</a></code>
     element in the shadow tree, if any, with the child nodes of the <a
     href="#next-">next most derived</a> binding's shadow tree's root
     <code><a href="#template0">template</a></code> element, or, if there is
     no less-derived binding with a shadow tree, with the child nodes of the
     <code><a href="#inherited0">inherited</a></code> element itself.

    <li>If the previous step added a shadow tree to the flattened tree, then
     return to step 3 to deal with that newly added shadow tree. Otherwise,
     move on to the next bound element.
   </ol>

   <div class=example>
    <p>Imagine the following document fragment:</p>

    <pre>...
 &lt;A&gt;
  &lt;B&gt;
   &lt;C/&gt;
   &lt;D/&gt;
  &lt;/B&gt;
 &lt;/A&gt;
...</pre>

    <p>...is bound to the following XBL:</p>

    <pre>&lt;xbl:xbl xmlns:xbl="http://www.w3.org/ns/xbl"&gt;
 &lt;xbl:binding element="B"&gt;
  &lt;xbl:template&gt;
   &lt;P&gt;
    &lt;Q&gt;
     &lt;xbl:content includes="C"&gt;
      &lt;R/&gt;
     &lt;/xbl:content&gt;
    &lt;/Q&gt;
    &lt;xbl:content includes="D"&gt;
     &lt;S/&gt;
    &lt;/xbl:content&gt;
   &lt;/P&gt;
  &lt;/xbl:template&gt;
 &lt;/xbl:binding&gt;
 &lt;xbl:binding element="Q"&gt;
  &lt;xbl:template&gt;
   &lt;X&gt;
    &lt;Y&gt;
     &lt;xbl:content&gt;
      &lt;Z1/&gt;
     &lt;/xbl:content&gt;
     &lt;xbl:content&gt;
      &lt;Z2/&gt;
     &lt;/xbl:content&gt;
    &lt;/Y&gt;
   &lt;/X&gt;
  &lt;/xbl:template&gt;
 &lt;/xbl:binding&gt;
&lt;/xbl:xbl&gt;</pre>

    <p>The resulting DOM would look like the following. To read these
     diagrams, use the following key:</p>

    <pre>
      |    Solid/dashed lines represent normal DOM traversal attribute
   ---+--- relationships using childNodes, parentNode, nextSibling,
      |    previousSibling, firstChild, lastChild, etc.

      :
   ...:... Dotted lines represent the final flattened tree.
      :</pre>

    <p>White-space nodes have, for sanity, been left out of these diagrams.</p>

    <p>DOM view:</p>

    <pre>
   |
   +-- A
       |
       +-- B
           |
           +-- C
           |
           +-- D
</pre>

    <p>The shadow trees of B elements:</p>

    <pre>
   template
    |
    +-- P
        |
        +-- Q
        |   |
        |   +-- content
        |       |
        |       +-- R
        |
        +-- content
            |
            +-- S
</pre>

    <p>The shadow trees of Q elements:</p>

    <pre>
   template
    |
    +-- X
        |
        +-- Y
            |
            +-- content
            |   |
            |   +-- Z1
            |
            +-- content
                |
                +-- Z2
</pre>

    <p>The final flattened tree:</p>

    <pre>
   :
   :.. A
       :
       :.. B
           :
           :.. P
               :
               :.. Q
               :   :
               :   :.. X
               :       :
               :       :.. Y
               :           :
               :           :.. C
               :           :
               :           :.. Z2
               :
               :.. D
</pre>

    <p>The final flattened tree overlayed with the core DOM (the "*" and "#"
     characters here identify which <code><a
     href="#content0">content</a></code> elements the two explicit children
     are assigned to):</p>

    <pre id=pretty-diagram>
   :|___
   :....A      template
        :|___     |
        :... B    |
            :|    |
            :|... P       template
             |   :|____      |
             |   :|... Q     |
             |   :|   :|     |
             |   :|   :|.... X
             |   :|    |     :\_______
             |   :|    |     :....... Y __
             |   :|    |              :   \
             |   :|    +-- content*   :    |
             |   :|         |         :    |
             |   :|         +-- R     :    +-- content*
             |   :|                   :    |    |
             +---:|--------- C* ......:    |    `-- Z1
             |   :|                   :    |
             |   :|                   :    `-- content
             |   :|                   :         |___
             |   :|                   :............ Z2
             |   :`-- content#
             |   :     |
             |   :     `-- S
             |___:____
                 :... D#
</pre>
   </div>

   <h4 id=terminology0><span class=secno>4.5.1. </span>Terminology</h4>

   <p>Shadow content introduces the concept of <dfn id=shadow9>shadow
    scope</dfn> to nodes within a document. Because shadow content elements
    can also have bindings attached that generate their own shadow content,
    this scoping can be taken to an arbitrary level of nesting.</p>

   <p>Shadow content nodes are in <dfn id=binding-level>binding-level shadow
    scopes</dfn>. Binding scopes are determined by the bound element to which
    the binding responsible for the generation of the shadow nodes is
    attached. The bound element itself is in the shadow scope of the content
    around it, and its binding's shadow content is in a deeper shadow scope.
    Shadow content that contains no elements that are themselves bound is
    said to be in the deepest, or innermost, shadow scope.</p>

   <h3 id=handling0><span class=secno>4.6. </span><dfn id=handling4>Handling
    DOM Changes</dfn></h3>

   <p>All of the nodes in the shadow tree are live. Whenever an element is
    inserted into, removed from, or appended to the DOM, and whenever its
    attributes or pseudo-class states are changed, all the children of bound
    elements must check that their assigned <code><a
    href="#content0">content</a></code> element is still appropriate,
    following all the same rules that applied when first placing <a
    href="#explicit3">explicit children</a> during shadow content generation.
    If one or more nodes stop fitting into any of the <code><a
    href="#content0">content</a></code> elements then they no longer appear
    in the <a href="#final0">final flattened tree</a>. Similarly, nodes that
    previously did not appear in the final flattened tree may start matching
    a <code><a href="#content0">content</a></code> element and thus be
    inserted into the flattened tree.</p>

   <p>It is possible to manipulate the shadow content contained underneath a
    bound element using standard DOM APIs. If shadow content that contains a
    <code><a href="#content0">content</a></code> element is removed, then any
    <a href="#explicit3">explicit children</a> assigned to that element are
    relocated to the first unlocked <code><a
    href="#content0">content</a></code> elements that match them. If a
    <code><a href="#content0">content</a></code> element's <code
    title=attr-content-includes><a href="#includes">includes</a></code>
    attribute is changed, then the <a href="#explicit3">explicit children</a>
    of the binding's bound element must be redistributed appropriately.</p>

   <p><code><a href="#content0">content</a></code> elements may be
    dynamically locked by manipulating their <code
    title=attr-content-locked><a href="#locked">locked</a></code> attribute.
    A locked <code><a href="#content0">content</a></code> element cannot
    accept new children unless they are explicitly assigned to it using the
    <code><a href="#setinsertionpoint">setInsertionPoint()</a></code> method.
    However, children already under a locked <code><a
    href="#content0">content</a></code> element remain there while the
    element's <code title=attr-content-includes><a
    href="#includes">includes</a></code> attribute (or lack thereof) matches
    them.</p>

   <p>Whenever the subtree of a <code><a
    href="#template0">template</a></code> element in a binding document is
    dynamically modified, any shadow trees that were constructed by cloning
    that element must be <a href="#regenerating">regenerated</a>.</p>
   <!-- XXX when does this happen,
  exactly, relative to the mutations? -->
   <h3 id=shadow0><span class=secno>4.7. </span>Shadow Content and CSS</h3>

   <h4 id=selectors><span class=secno>4.7.1. </span><dfn
    id=selectors1>Selectors and Shadow Scopes</dfn></h4>

   <p>Bindings can interleave shadow elements between the bound element and
    its <a href="#explicit3">explicit children</a>. (See: <a
    href="#processing2">processing <code title="">content</code>
    elements</a>.) In this situation, a new tree emerges that is different
    from the explicit content node tree. In addition to having a single
    explicit parent (the bound element) and a single set of children (the
    explicit children in the DOM tree), elements also have a set of shadow
    parents and shadow children (introduced by bindings when <code><a
    href="#content0">content</a></code> elements were used). This necessarily
    affects the CSS model.</p>

   <p><em>Combinators:</em> CSS combinators, in the presence of XBL, must act
    as follows. This is intended to match the definitions of CSS in all cases
    other than when a selector would involve one or more XBL elements.</p>

   <dl>
    <dt>A&gt;B

    <dd>
     <p>If "<code>B</code>" is in a shadow tree and
      "<code>B.parentNode</code>" is a <code><a
      href="#content0">content</a></code> element or an <code><a
      href="#inherited0">inherited</a></code> element, let "<code>X</code>"
      be "<code>B.parentNode.parentNode</code>", otherwise let
      "<code>X</code>" be "<code>B.parentNode</code>".</p>

     <p>Now if "<code>X</code>" is the root of a shadow tree, but the
      binding's "<code title=attr-template-allow-selectors-through><a
      href="#allow-selectors-through">allow-selectors-through</a></code>" is
      not <code>true</code>, the selector doesn't match "<code>B</code>".
      Otherwise, if "<code>X</code>" is the root of a shadow tree and the
      binding's "<code title=attr-template-allow-selectors-through><a
      href="#allow-selectors-through">allow-selectors-through</a></code>" is
      <code>true</code> and the binding is the bound element's most derived
      binding with a shadow tree, then let "<code>X</code>" be the bound
      element for which the shadow tree was generated. Otherwise, if
      "<code>X</code>" is the root of a shadow tree and the binding's "<code
      title=attr-template-allow-selectors-through><a
      href="#allow-selectors-through">allow-selectors-through</a></code>" is
      <code>true</code> but the binding is not the bound element's most
      derived binding with a shadow tree, then let "<code>X</code>" be the
      parent node of the <code><a href="#inherited0">inherited</a></code>
      element into which the shadow tree was placed during the construction
      of the <a href="#final0">final flattened tree</a>; if this is itself
      the root of a shadow tree, then repeat the steps described in this
      paragraph using that element as "<code>X</code>".</p>

     <p>Then, the selector matches "<code>B</code>" if the "<code>X</code>"
      element is the "<code>A</code>" element.</p>

    <dt>A&nbsp;B

    <dd>Matches "<code>B</code>" if either "<code>A&gt;B</code>" matches
     "<code>B</code>", or "<code>C&gt;B</code>" matches "<code>B</code>" and
     "<code>A&nbsp;C</code>" matches "<code>C</code>".

    <dt>A+B

    <dd>If "<code>B</code>" is in a shadow tree and
     "<code>B.previousSibling</code>" is a <code><a
     href="#content0">content</a></code> element or an <code><a
     href="#inherited0">inherited</a></code> element, the selector doesn't
     match "<code>B</code>", otherwise, it matches if
     "<code>B.previousSibling</code>" is "<code>A</code>".

    <dt>A~B

    <dd>Matches "<code>B</code>" if either "<code>A+B</code>" matches
     "<code>B</code>", or if "<code>C+B</code>" matches "<code>B</code>" and
     "<code>A~C</code>" matches "<code>C</code>".
   </dl>

   <div class=example>
    <p>The selector <code>p ~ p</code> never matches any elements in the
     following example, even if the <code><a
     href="#content0">content</a></code> element has a <code>p</code> element
     assigned to it:</p>

    <pre>&lt;template>
 &lt;html:p>...&lt;/html:p>
 &lt;content includes="p">&lt;html:p>...&lt;/html:p>&lt;/content>
 &lt;html:p>...&lt;/html:p>
&lt;/template>
   </pre>
   </div>

   <p><em>Pseudo-classes and pseudo-elements:</em> Pseudo-classes and
    pseudo-elements are unchanged in the presence of XBL. They operate
    exclusively on the core DOM.</p>

   <div class=example>
    <p>In particular, note that this means that the selector
     <code>:nth-child(odd)</code> would match both the <code>A</code> and
     <code>B</code> nodes in the following example:</p>

    <pre>&lt;xbl:template>
  &lt;A/>
  &lt;xbl:content/>
  &lt;B/>
&lt;/xbl:template></pre>

    <p>...regardless of the number of nodes that are inserted at the point
     given by the <code><a href="#content0">content</a></code> element
     (whether that be 0, 1, 2, or more nodes).</p>
   </div>

   <h4 id=css-property><span class=secno>4.7.2. </span><dfn
    id=css-property1>CSS Property Inheritance and Rendering</dfn></h4>

   <p>The <a href="#final0">final flattened tree</a> determines how CSS
    properties (e.g., fonts and colors) are inherited. Elements must inherit
    from their parent node in the <a href="#final0">final flattened tree</a>,
    regardless of what their DOM Core parent node is.</p>

   <p>Similarly, the rendering is performed using the <a href="#final0">final
    flattened tree</a>. Nodes that do not appear in the <a
    href="#final0">final flattened tree</a> have no computed style (as if
    they were orphan nodes) and are not rendered.</p>

   <h4 id=the-bound-element><span class=secno>4.7.3. </span>The <code><a
    href="#bound-element">:bound-element</a></code> Pseudo-Class</h4>

   <p>The <dfn id=bound-element><code>:bound-element</code></dfn>
    pseudo-class, when used from a binding, must match the bound element of
    that binding. If the selector is used somewhere other than in a binding's
    style sheet (i.e. with a <code><a href="#style2">style</a></code> element
    in XBL) or in a <code><a href="#content0">content</a></code> element's
    <code title=attr-content-includes><a href="#includes">includes</a></code>
    attribute, then it must match any bound element. <a
    href="#refsSELECTORS">[SELECTORS]</a></p>

   <div class=example>
    <p>In the following example, the binding uses this pseudo-class to to
     draw a border around each of the children of the bound element, but no
     other elements:</p>

    <pre>&lt;xbl xmlns="http://www.w3.org/ns/xbl">
 &lt;binding>
  &lt;template>&lt;content allow-selectors-through="true"/>&lt;/template>
  &lt;style>
   :bound-element > * { border: solid; }
  &lt;/style>
 &lt;/binding>
&lt;/xbl></pre>
   </div>

   <h4 id=matching><span class=secno>4.7.4. </span><dfn id=matching1>Matching
    Pseudo-Elements</dfn></h4>

   <p>Shadow nodes may be associated with various pre-defined <a
    href="#pseudo-element" title=pseudo-element>pseudo-elements</a> of the
    bound element. On any element in the shadow content template, an <code
    title=attr-pseudo><a href="#xblpseudo0">xbl:pseudo</a></code> attribute
    (in the XBL namespace) can be used to specify the name of the pseudo to
    associate with that element.</p>

   <div class=example>
    <p>For example, once more returning to the HTML file upload control
     example above, the shadow text field can be set up to be considered a
     match for the selector <span>input[type=file]::value</span> as follows.</p>

    <pre>&lt;xbl:binding id="fileUploadControl"&gt;
  &lt;xbl:template&gt;
    &lt;html:input type="text" xbl:pseudo="value"/&gt;
    &lt;html:input type="button" value="Browse..."/&gt;
  &lt;/xbl:template&gt;
&lt;/xbl:binding&gt;</pre>
   </div>

   <p>The pseudo must be given without its leading double colon.</p>

   <p>If the pseudo-element name is not recognized, it is <a
    href="#in-error">in error</a> and the UA must <a
    href="#ignoring">ignore</a> the attribute. User agents must not
    automatically recognize any pseudo-element (as this will break
    forwards-compatibility).</p>

   <p>If an element has multiple nodes with the same pseudo-element, then
    they all match the relevant selector. Matching of nodes based on their
    pseudo-element is unaffected by the <code>apply-author-sheets</code>
    attribute.</p>

   <p id=pseudo-list>The allowed pseudo-elements are:</p>

   <dl>
    <dt>::value

    <dd>Intended to represent the entire rectangular 'interactive area' (or
     the nearest equivalent in non-visual environments) of a text-entry form
     control, specifically excluding the caption.

    <dt>::choices

    <dd>Intended to represent the entire rectangular 'selection area' (or the
     nearest equivalent in non-visual environments) of a list form control,
     specifically excluding the caption.

    <dt>::label

    <dd>Intended to represent the non-interactive area (or the nearest
     equivalent in non-visual environments) of control, typically the
     caption.

    <dt>::repeat-item

    <dd>Within a repeating sequence, for example generated by the repeat
     construct in XForms, <!-- or the template stuff in XUL --> each repeated
     item could be labeled as matching a pseudo-element ::repeat-item.

    <dt>::icon

    <dd>Intended to represent the icon part of a control, for example the
     picture in a toolbar button or the icon next to a menu item.</dd>
    <!--
    <dt>::XXX</dt>

    <dd>Intended to represent a specific part (or the nearest equivalent
    in non-visual environments) of a XXX control.</dd>
  -->
    <!-- XXX add more from css3-ui -->
   </dl>

   <p>These pseudo-element descriptions are purely advisory, and while
    authors are encouraged to use them for their predefined roles, it is
    valid to use them for other purposes.</p>

   <div class=example>
    <p>The following XBL is part of the definition of a button control.</p>

    <pre>  &lt;xbl:binding id="imageButton"&gt;
    &lt;xbl:template&gt;
      &lt;html:span xbl:pseudo="icon"/&gt;
      &lt;html:span xbl:attr="xbl:text=title"/&gt;
    &lt;/xbl:template&gt;
  &lt;/xbl:binding&gt;</pre>

    <p>This control could then be used like this:</p>

    <pre>&lt;button title="Save" class="save-button"/&gt;</pre>

    <p>...and styled like this:</p>

    <pre>  button { binding: url(buttons.xml#imageButton); }
  button.save-button::icon {
     content: url(icons/save.png);
  }
  </pre>
   </div>

   <p>In property descriptions, the term "all elements" in the "Applies To:"
    line includes these pseudo-elements, as they map directly to real
    elements in the binding.</p>

   <p>User agents are required to support the above pseudo-element
    identifiers, in so far as they interact with XBL2. User agents may also
    support these same pseudo-elements for other purposes, e.g. as described
    in the CSS3 UI specification. <a href="#refsCSS3UI">[CSS3UI]</a></p>

   <h3 id=shadow1><span class=secno>4.8. </span>Shadow Content and
    <code>xml:base</code></h3>

   <p class=note>This section is intended to re-iterate what the
    <code>xml:base</code> specification already states, in case there is any
    question about how <code>xml:base</code> processing should work in shadow
    trees.</p>

   <p>Relative <code>xml:base</code>s on nodes in shadow trees are resolved
    relative to their <code>parentNode</code>, or the
    <code>ownerDocument</code> if there is no <code>parentNode</code>.</p>

   <h3 id=shadow2><span class=secno>4.9. </span><dfn id=shadow10
    title="Semantics of non-XBL elements in XBL contexts">Shadow Content and
    Other Things</dfn></h3>
   <!--XXX Things that need to be defined in future revisions include
  <em>binding to</em> html:script, html:select, html:textarea, MathML
  nodes, etc (are their semantics based on the shadow tree, the
  <span>final flattened tree</span>, or the original tree), as well as
  having elements inside the shadow tree such as html:script,
  html:style, html:map, form controls (are they part of the outer
  form), html:form (does it wrap elements that are assigned to
  <code>content</code> elements?), etc. -->
   
   <p>Since the processing rules of all non-XBL elements found while
    processing a binding document are not affected by their being part of an
    XBL subtree, there are certain elements that are unlikely to have the
    desired effect when included in shadow content templates. Some of these
    cases are described below.</p>

   <p class=note>While some of these effects may seem peculiar, it must be
    emphasized that they are merely the result of XBL not affecting the
    semantics of these elements at all. It would have been possible to define
    XBL in such a way that the semantics of various elements from the XHTML,
    XML Events, etc, namespaces were modified, but this would have required
    XBL knowing about special elements from a large number of namespaces,
    causing XBL implementations to have large interdependencies.</p>

   <h4 id=general><span class=secno>4.9.1. </span>General Rules</h4>

   <p>Shadow content is not considered part of a document, so elements that
    are defined to trigger when they are "inserted into the document" do not
    trigger during binding attachment.</p>

   <p>IDs used in shadow content, as seen on XML Events nodes, in XHTML on
    the <code>html:label</code> element's <code>for</code> attribute, and in
    many other places, must be resolved in the context of the <a
    href="#shadow9">shadow scope</a> and (failing that) the binding document,
    not the scope of the document into which the shadow content is inserted.</p>

   <div class=example>
    <p>If a shadow template has an <code>html:img</code> element that has its
     <code>usemap</code> attribute set:</p>

    <pre>&lt;template ...>
  &lt;html:img src="..." usemap="#test" alt="..."/>
&lt;/template></pre>

    <p>If the binding is applied to an element in a document containing an
     <code>html:map</code> element with ID "test", that image map will not be
     associated with this image. If the binding document itself contains an
     <code>html:map</code> element with ID "test", however, that
     <em>would</em> be associated with the element (even if it was, say, in
     another binding's template).</p>

    <p>If the template looked like this:

    <pre>&lt;template ...>
  &lt;html:img src="..." usemap="#test" alt="..."/>
  &lt;html:map id="test"> ... &lt;/html:map>
&lt;/template></pre>

    <p>...then the <code>html:img</code> element would always be attached to
     that <code>html:map</code> element, regardless of the existence of other
     <code>html:map</code> elements in the binding document.</p>
   </div>

   <p>When an element's processing model is defined in terms of the element's
    child nodes or descendants, shadow trees do not affect the processing
    model (unless this is called out explicitly below). For instance, an HTML
    <code>title</code> element's behavior in determining the document title
    is unaffected by XBL, even if the <code>title</code> element is bound or
    has bound elements in its descendants.</p>

   <p>When the nodes are cloned, their <code>xml:base</code> data remains as
    it was in the bindings document (see <span>rules for content
    generation</span>). Therefore URIs consisting of just fragment
    identifiers (such as those in <code>url()</code> notation in <code
    title="">style</code> attributes of, e.g., XHTML nodes) refer to
    resources in the bindings document, not content in the bound document or
    the shadow tree.</p>

   <p class=note>This would cause trouble with <a
    href="#attribute1">attribute forwarding</a>, so the attribute forwarding
    syntax allows attributes to be marked as being <a href="#url"
    title=type-url>of type "url"</a>.</p>

   <h4 id=style><span class=secno>4.9.2. </span><dfn id=style3>Style
    Blocks</dfn></h4>

   <p>The semantics of <code>html:style</code> elements is that they
    introduce new styles for their document. Since the document, in the case
    of anything in an XBL subtree, is the bindings document (or the <a
    href="#non-xbl">non-XBL document</a> in which the XBL subtree is found),
    <em>that</em> is the document that must be affected by such a style
    sheet.</p>

   <p>Since the style sheets of such resource documents generally have no
    effect, placing <code>html:style</code> blocks in XBL binding documents
    is usually redundant. Such an element placed in a shadow content template
    does not affect the documents into which the shadow content is later
    inserted during binding attachment.</p>

   <h4 id=script><span class=secno>4.9.3. </span><dfn id=script3>Script
    Blocks</dfn></h4>

   <p>Script elements, such as <code>html:script</code> and its ilk, are
    typically evaluated only during parsing, or during parsing and when
    inserted into a document. In all cases, however, they are evaluated in
    the context of their owner document. Therefore such elements must only be
    evaluated during initial parsing, in the context of the XBL subtree's
    document, and not during binding attachment.</p>

   <h4 id=event><span class=secno>4.9.4. </span><dfn id=event10>Event Handler
    Blocks</dfn></h4>

   <p>XML Events elements in the binding document must result in event
    handlers being registered as event listeners on the nodes in the original
    bindings document (including possibly the <code title=template><a
    href="#template0">template</a></code> node) as described in XML Events.
    They may be included in shadow content templates, but when the shadow
    content template is cloned, the newly cloned event handlers must cause
    new event listeners to be added to their new DOM Core parent nodes. Thus
    an event handler that is the child of an <code><a
    href="#template0">template</a></code> element in the shadow content
    template will never fire once it has been cloned, since the events <a
    href="#event13" title="Event Flow and Targeting Across Shadow Scopes">do
    not bubble into the <code>template</code> elements</a>. <a
    href="#refsXMLEVENTS">[XMLEVENTS]</a></p>

   <p>Event handler blocks that are children of <code><a
    href="#handlers0">handlers</a></code> elements (in particular XML Events
    handler blocks) cause event listeners to be fired when <a
    href="#event12">event forwarding</a> happens, just like with XBL <code><a
    href="#handler0">handler</a></code> elements.</p>

   <h4 id=html-forms><span class=secno>4.9.5. </span>HTML Forms</h4>

   <p>Forms and form controls in shadow trees don't interact with form
    controls and <code>form</code> elements in the bound document. Each
    document and shadow tree creates a new scope for forms and form controls.</p>

   <div class=example>
    <p>Here's an extract from an HTML document with a form:</p>

    <pre>...
&lt;form action="register" method="post">
 &lt;h2>Customer Registration&lt;/h2>
 &lt;p>Please enter your details.&lt;/p>
 &lt;fieldset>
  &lt;legend>Contact Information&lt;/legend>
  &lt;p>Name: &lt;input name="name" title="Enter your full name (first name first).">&lt;/p>
  &lt;p>Job Title: &lt;input name="title" title="Enter your job title, e.g. 'Software Engineer'.">&lt;/p>
  &lt;p>E-mail: &lt;input name="email" title="Enter your e-mail address, in the form 'user@example.com'.">&lt;/p>
 &lt;/fieldset>
 &lt;fieldset>
  &lt;legend>Company Information&lt;/legend>
  &lt;p>Name: &lt;input name="company" title="Enter the name of your employer.">&lt;/p>
  &lt;p>Address: &lt;textarea name="address" title="Enter the full street address of your employer, including postal code.">&lt;/p>
 &lt;/fieldset>
 &lt;fieldset>
  &lt;legend>Additional Information&lt;/legend>
  &lt;p>Birthday: &lt;input name="dob" title="Enter your birthdate in the form YYYY-MM-DD, e.g. 1975-03-29.">&lt;/p>
  &lt;p>Favorite animal: &lt;input name="animal" title="Enter the word 'Cat'.">&lt;/p>
 &lt;/fieldset>
 &lt;fieldset>
  &lt;legend>Submission&lt;/legend>
  &lt;p>&lt;button title="Only submit the form when you are sure it is complete.">Submit&lt;/button>&lt;/p>
 &lt;/fieldset>
&lt;/form>
...</pre>

    <p>The first binding, shown below as an extract from an XBL document,
     could be attached to the <code>form</code> above, through CSS, to
     provide a help box that shows the help text associated with the
     currently focused control:</p>

    <pre>...
&lt;binding id="form-with-help">
 &lt;template>
  &lt;div>
   &lt;div class="header">Form:&lt;/div>
   &lt;div class="form">&lt;content/>&lt;/div>
  &lt;/div>
  &lt;div>
   &lt;div class="header">Help:&lt;/div>
   &lt;div id="help"/>
  &lt;/div>
 &lt;/template>
 &lt;resources>
  &lt;style>
   .header { font-size: larger; }
   .form { height: 15em; overflow: scroll; }
  &lt;/style>
 &lt;/resources>
 &lt;handlers>
  &lt;handler event="focus">
   this.shadowTree.getElementById('help').textContent = event.target.getAttribute('title');
  &lt;/handler>
 &lt;/handlers>
&lt;/binding>
...</pre>

    <p>The help could be positioned more usefully by a slightly more advanced
     binding that positioned the <code><a href="#div0">div</a></code> when
     setting the help.</p>

    <p>The last binding isn't particularly interesting. However, the
     important thing to note is that if it was extended to include form
     controls of its own, as in the following example, the form controls in
     the binding would not interact with the form in the markup:</p>

    <pre>...
&lt;binding id="form-with-help">
 &lt;template>
  &lt;div class="header">
   &lt;div class="title">&lt;content includes=":bound-element > h2:first-of-type"/>&lt;/div>
   &lt;div class="tagline">&lt;content includes=":bound-element > h2:first-of-type ~ p:first-of-type"/>&lt;/div>
  &lt;/div>
  &lt;div>
   &lt;div class="panel">&lt;content locked="true" id="current"/>&lt;/div>
  &lt;/div>
  &lt;div>
   &lt;div class="buttons">
    &lt;button id="back">Back&lt;/button>
    &lt;button id="next">Next&lt;/button>
   &lt;/div>
  &lt;/div>
  &lt;div class="hidden">&lt;content includes=":bound-element > fieldset" id="not-current"/>&lt;/div>
 &lt;/template>
 &lt;implementation>
  ({
    set current(fieldset) {
      if (this._current)
        this.shadowTree.getElementById('not-current').setInsertionPoint(this._current);
      this._current = fieldset;
      if (this._current)
        this.shadowTree.getElementById('current').setInsertionPoint(this._current);
    },
    back: function() {
      if (!this._current) return;
      var notCurrent = this.shadowTree.getElementById('not-current');
      notCurrent.setInsertionPoint(this._current);
      var last = this._current;
      var index = 0;
      while (index &amp;lt; notCurrent.xblChildNodes.length &&
             notCurrent.xblChildNodes[index] != this._current)
        last = notCurrent.xblChildNodes[index++];
      this._current = last;
      this.shadowTree.getElementById('current').setInsertionPoint(this._current);
    }
    next: function() {
      if (!this._current) return;
      var notCurrent = this.shadowTree.getElementById('not-current');
      notCurrent.setInsertionPoint(this._current);
      var last = this._current;
      var index = notCurrent.xblChildNodes.length-1;
      while (index > 0 && notCurrent.xblChildNodes[index] != this._current)
        last = notCurrent.xblChildNodes[index++];
      this._current = last;
      this.shadowTree.getElementById('current').setInsertionPoint(this._current);
    }
    get current() {
      return this._current;
    },
    xblBindingAttached: function() {
      this.current = this.getElementById('not-current').xblChildNodes[0];
      this.shadowTree.getElementById('back').addEventListener('click', this.back, false);
      this.shadowTree.getElementById('next').addEventListener('click', this.next, false);
    },
  })
 &lt;/implementation>
 &lt;resources>
  &lt;style> ... &lt;/style>
 &lt;/resources>
&lt;/binding>
...</pre>

    <p>Again, the binding could be made cleaner, e.g. by disabling the "back"
     button when on the first page, and by hiding the last fieldset and
     instead having a "finish" button, but these improvements are left as
     exercises for the reader.</p>
   </div>

   <h4 id=svg><span class=secno>4.9.6. </span>SVG</h4>

   <p><em>Painting:</em> When painting groups, for child elements that have
    shadow trees, instead of painting the child element itself, the group
    must paint the child nodes of the element's shadow tree's root <code><a
    href="#template0">template</a></code> element.</p>

   <p><em>Text:</em> When rendering text, for descendant elements that have
    shadow trees, instead of using the element or its children directly, the
    user agent must use the child nodes of the element's shadow tree's root
    <code><a href="#template0">template</a></code> element. (All other
    processing, e.g. handling of combining characters, must then be done as
    defined for SVG.)</p>

   <p><em>ID references and URIs:</em> When a URI identifies an element with
    a shadow tree, the SVG processor must use the first element node in the
    element's shadow tree's root <code><a
    href="#template0">template</a></code> element's <code>childNodes</code>
    list instead of the element itself. If there are no elements, then the
    SVG document is in error. The SVG specification defines how to handle
    documents that are in error.</p>
   <!-- NOT links to "in error", since this is
  SVG-in-error, not XBL-in-error. -->
   
   <p>When a URI reference with a fragment identifier in a shadow tree
    references the binding document, then, if an elemnt in the shadow tree is
    identified by the fragment identifier, that is the element that must be
    used; otherwise, the fragment identifier must be matched against the
    actual binding document instead.</p>

   <p><em>Animation elements:</em> When an animation element would be
    implicitly associated with its parent element (e.g. when it has no <code
    title="">xlink:href</code> attribute), but that parent element is a
    <code><a href="#template0">template</a></code> element that is the root
    of a shadow tree, then the animation element must instead be associated
    with the element found using the following algorithm:</p>

   <ol>
    <li>Let <var title="">element</var> be the animation element.

    <li>If <var title="">element</var> has no parent element, then the
     animation element is not associated with any element. Stop these steps.

    <li>Let <var title="">parent</var> be the parent element of <var
     title="">element</var>.

    <li>If <var title="">parent</var> is a <code><a
     href="#template0">template</a></code> element that is the root of a
     shadow tree, then let <var title="">element</var> be the bound element
     for that shadow tree, and return to the second step.

    <li>Otherwise, <var title="">parent</var> is the element to which the
     animation element is assigned.
   </ol>

   <p>Animation elements must be processed even when in shadow trees.</p>

   <div class=example>
    <p>In the following example, the UA would render the string "Hello Cruel
     World", while animating the colour of the entire string over six
     seconds.</p>

    <pre>&lt;svg xmlns="http://www.w3.org/2000/svg">
  &lt;defs>
    &lt;b:xbl xmlns:b="http://www.w3.org/ns/xbl">
      &lt;b:binding <a href="#element" title=attr-binding-element>element="|world"</a>>
        &lt;b:template>
          &lt;tspan <a href="#xblattr0" title=attr-attr>b:attr</a>="<a href="#xbltext" title=xbl:text>b:text=data</a>"/> World
          &lt;animateColor attributeName="fill" from="rgb(0,0,255)" to="rgb(128,0,0)" begin="0s" dur="6s" fill="freeze" />
        &lt;/b:template>
      &lt;/b:binding>
    &lt;/b:xbl>
  &lt;/defs>
  &lt;text y="50" font-size="12">
    Hello &lt;world xmlns="" data="Cruel"/>
  &lt;/text>
&lt;/svg></pre>
   </div>

   <h3 id=binding3><span class=secno>4.10. </span><dfn id=binding22>Binding
    Style Sheets</dfn></h3>

   <p>Shadow content nodes and bound elements are styled using style sheets
    from a number of sources, depending on the values of certain attributes.
    When multiple bindings are applied to the same bound element, the sheets
    from each binding all contribute to the final set of style sheets to
    apply, the style sheets of the <a href="#most-derived">most derived
    binding</a> being walked first. For each binding, the style sheets that
    apply are as follows, in the order given:</p>

   <p><em>Scoped style sheets:</em> A binding file can load style sheets
    using the <code><a href="#style2">style</a></code> element. (See: <a
    href="#loading7">loading style sheets</a>.) These style sheets must be
    applied to the bound element and to all shadow content attached to the
    bound element.</p>

   <p>If the binding was attached using CSS, the scoped style sheets have the
    same CSS origin as the sheet with the rule responsible for the binding.
    Style sheets used by bindings that are attached using the DOM or using
    <code title=import><a href="#importing1">&lt;?xbl?&gt;</a></code> are
    treated as author-level sheets.</p>

   <p>When bindings from multiple levels are applied to the same bound
    element, the style sheets that apply must cascade according to their own
    levels.</p>

   <p class=example>An element E is attached to binding U from the user agent
    style sheet, and binding A from the DOM, which places A in the author
    level. When the style sheets that apply to E are sorted, U must be
    applied at the UA level and A at the author level.</p>

   <p><em><a href="#author">Author style sheets</a></em>: While the <code
    title=attr-template-apply-author-sheets><a
    href="#apply-author-sheets">apply-author-sheets</a></code> attribute on
    the <code><a href="#template0">template</a></code> element found at the
    root of the element's shadow tree is set to <code>true</code>, the rules
    specified in any <a href="#author">author style sheets</a> at <a
    href="#shadow9" title="shadow scope">outer shadow scopes</a> (including
    those promoted to outer scopes using <code
    title=attr-content-apply-binding-sheets><a
    href="#apply-binding-sheets">apply-binding-sheets</a></code>, as defined
    below) must be applied to the shadow content. Otherwise, only those
    matched through <a href="#pseudo-list">predefined pseudo-elements</a> are
    used, and other author-level sheets in higher shadow scopes must not be
    applied to the shadow content. (The bound element is always styled using
    the sheets of higher shadow scopes.)</p>

   <p>By default, style sheets specified in bindings (as described above) are
    applied only to shadow content generated by bindings attached to the
    bound element and to the bound element itself. A second attribute, <code
    title=attr-content-apply-binding-sheets><a
    href="#apply-binding-sheets">apply-binding-sheets</a></code>, can be used
    to indicate that all descendants of the bound element, both shadow and
    explicit, can be styled by the sheets in the binding's document. This can
    be controlled on a per-insertion-point basis. While this attribute is set
    to <code>true</code> on a <code><a href="#content0">content</a></code>
    node in the shadow tree DOM, any nodes that are assigned to that element,
    and any descendants of those nodes, must have the scoped style sheets of
    the binding (those that apply to the shadow content as described above)
    applied to them too, as if they had been promoted to the higher scope.</p>

   <p>Sheets within each origin are always walked from the innermost shadow
    scope to the outermost shadow scope (with rules in the outermost shadow
    scope therefore overriding rules of equal specificity in the innermost
    shadow scope). With this ordering a binding that defines a widget can
    define a default look for the widget that can then be easily overridden
    by a client of the widget. For multiple bindings attached to the same
    element, the sheets are walked from the <a href="#base-binding">base
    binding</a> to the <a href="#most-derived">most derived binding</a>.</p>

   <p><em><a href="#user-agent">User agent style sheets</a> and <a
    href="#user-style">user style sheets</a></em>: These are always applied
    to all shadow scopes.</p>

   <p>Since styles from both author style sheets and binding style sheets are
    applied to the bound element, it is possible for an infinite loop to form
    where an author sets the '<code title="binding property"><a
    href="#binding18">binding</a></code>' property to a particular binding
    that then explicitly sets the '<code title="binding property"><a
    href="#binding18">binding</a></code>' property to 'none' (or another
    binding). This specification does not take any precautions to avoid this,
    any more than it takes precautions to avoid loops caused by binding
    constructors explicitly calling <code><a
    href="#removebinding">removeBinding()</a></code> to remove the binding
    itself and binding detachment event handlers reattaching the bindings.
    Similar potential loops exist also in underlying technologies, for
    example <code>:hover</code> rules that cause elements to no longer be
    hovered, or focus event handlers that move focus to an element and blur
    event handlers that move focus back to the element.</p>

   <p>In so far as XBL is concerned, authors must avoid constructing such
    loops, and implementers must ensure that such loops do not prevent users
    from interacting with the user agent.</p>

   <h4 id=styleSummary><span class=secno>4.10.1. </span>Summary of styling
    rules</h4>

   <p><em>This section is non-normative.</em></p>

   <p>The <code>&lt;style&gt;</code> is applied only to the bound element and
    the shadow content that was generated by the binding. The
    <code>&lt;style&gt;</code> is also applied to explicit children (and
    their descendants) assigned to <code>&lt;content&gt;</code> elements
    whose <code title=attr-content-apply-binding-sheets><a
    href="#apply-binding-sheets">apply-binding-sheets</a></code> is set to
    <code>true</code>.</p>

   <p>Continuing from the above, author sheets (styles from the bound
    document) are applied to the shadow content only if <code
    title=attr-template-apply-author-sheets><a
    href="#apply-author-sheets">apply-author-sheets</a></code> is set to true
    for the <code>&lt;template&gt;</code>.</p>

   <p>Last, but not least, one can use author sheets to change the style of
    elements in the shadow content that use the <code title=attr-pseudo><a
    href="#xblpseudo0">xbl:pseudo</a></code> attribute, as long as it matches
    them with pseudo-elements (irrespective of the <code
    title=attr-template-apply-author-sheets><a
    href="#apply-author-sheets">apply-author-sheets</a></code> setting).</p>

   <h2 id=binding4><span class=secno>5. </span><dfn id=binding23>Binding
    Implementations</dfn></h2>

   <p>Bindings can define methods and properties on a bound element using the
    <code><a href="#implementation0">implementation</a></code> element. A
    binding implementation provides a new set of methods and properties that
    can be invoked from the bound element.</p>

   <p>How the binding implementation is defined depends on the scripting
    language used; the details for ECMAScript are defined below.</p>

   <p>In general, however, each binding has an object that implements the
    <code><a href="#xblimplementation">XBLImplementation</a></code>
    interface, along with any other interfaces that the implementation might
    implement. This is the <em>implementation object</em> for that instance
    of the binding. All elements implement the <code><a
    href="#elementxbl">ElementXBL</a></code> interface, whose <code><a
    href="#xblimplementations">xblImplementations</a></code> member returns
    an object implementing <code><a
    href="#xblimplementationlist">XBLImplementationList</a></code>. This
    object lists all the implementation objects for that bound element. (If
    the element is not a bound element, the list is empty.)</p>

   <h3 id=the-xblimplementation><span class=secno>5.1. </span>The <code><a
    href="#xblimplementation">XBLImplementation</a></code> Interface</h3>

   <p>All implementation objects support the <code><a
    href="#xblimplementation">XBLImplementation</a></code> interface (in
    addition to any other interfaces specific to the binding). By
    implementing the methods defined in this interface, bindings can be
    notified of the binding's state with respect to its environment.</p>

   <pre
    class=idl>interface <dfn id=xblimplementation>XBLImplementation</dfn> {
  void <a href="#xblbindingattached">xblBindingAttached</a>();
  void <a href="#xblentereddocument">xblEnteredDocument</a>();
  void <a href="#xblleftdocument">xblLeftDocument</a>();
};</pre>

   <p>The <dfn id=xblbindingattached><code>xblBindingAttached()</code></dfn>
    method is called by the user agent after the binding has been attached.
    (See: <a href="#binding19">binding attachment model</a>.)</p>

   <p>The <dfn id=xblentereddocument><code>xblEnteredDocument()</code></dfn>
    method is called by the user agent in two cases:</p>

   <ul>
    <li> When the bound element, or one of its ancestors, or one of the
     elements in a higher shadow scope, is inserted into the document.

    <li> When the binding is originally attached, if the bound element is
     already in the document.
   </ul>

   <p>Thus, it can be used to perform initialization steps that depend upon
    being in a document. (See: <a href="#binding19">binding attachment
    model</a>, <a href="#handling3">handling insertion and removal from the
    document</a>.)</p>

   <p>The <dfn id=xblleftdocument><code>xblLeftDocument()</code></dfn> method
    is called by the user agent when the bound element, or one of its
    ancestors, or one of the elements in a higher shadow scope, is removed
    from the document. (See: <a href="#handling3">handling insertion and
    removal from the document</a>.)</p>

   <p>If the <code><a href="#implementation0">implementation</a></code> does
    not define one of these methods, then when that method is invoked,
    nothing must happen (as if all bindings had default implementations of
    those methods that were no-ops).</p>
   <!-- XXX need a way to persist certain values -->
   <p>Authors should not start their own methods with the three letters
    "xbl". Future versions of this specification might add new callbacks to
    this interface, and if they do, those methods will start with the prefix
    "xbl".</p>
   <!-- XXX more callbacks:
    http://lxr.mozilla.org/seamonkey/source/content/xtf/public/nsIXTFStyledElementWrapper.idl
    xblSelected to indicate that the selection now spans the element (glazou)
   -->
   
   <div class=example>
    <p>This binding implements a clock. However, to save resources, the clock
     is only active when it is actually included in a document.</p>

    <pre>&lt;xbl xmlns="http://www.w3.org/ns/xbl">
 &lt;binding id="clock">
  &lt;implementation>
   ({
    xblEnteredDocument: function () {
      this.timer = setInterval(update, 1000);
    },
    xblLeftDocument: function () {
      clearInterval(this.timer);
    },
    update: function () {
      this.shadowTree.getElementById('clock-value').textContent = new Date();
    },
   })
  &lt;/implementation>
  &lt;template>&lt;div id="clock-value">&lt;/div>&lt;/template>
 &lt;/binding>
&lt;/xbl></pre>
   </div>

   <h3 id=the-xblimplementationlist><span class=secno>5.2. </span>The
    <code><a href="#xblimplementationlist">XBLImplementationList</a></code>
    Interface</h3>

   <p>The <dfn id=xblimplementations><code>xblImplementations</code></dfn>
    attribute on all elements must return an instance of an <code><a
    href="#xblimplementationlist">XBLImplementationList</a></code> object
    (the same object for the lifetime of the element), which is a live list
    of the implementation objects provided by the bindings for that bound
    element at any particular point in time.</p>

   <pre
    class=idl>interface <dfn id=xblimplementationlist>XBLImplementationList</dfn> {
  <a href="#xblimplementation">XBLImplementation</a> <a href="#itemn" title=XBLImplementationList-item>item</a>(in unsigned long index);
  readonly attribute unsigned long <a href="#length" title=XBLImplementationList-length>length</a>;
};</pre>

   <p>The <dfn id=length
    title=XBLImplementationList-length><code>length</code></dfn> attribute
    must return the number of implementation objects associated with the
    bound element, or zero if the element is not a bound element or has none
    of its bindings have implementations.</p>

   <p>The <dfn id=itemn
    title=XBLImplementationList-item><code>item(<var>n</var>)</code></dfn>
    method must return the <var>n</var>th implementation object associated
    with the bound element. If the index is not a number between zero and
    <code title=XBLImplementationList-length><a
    href="#length">length</a></code>-1 (inclusive), then the method must
    raise an <code>INDEX_SIZE_ERR</code> DOM exception. <a
    href="#refsDOM3CORE">[DOM3CORE]</a></p>

   <p>The list must be ordered such that the <a href="#most-derived">most
    derived binding</a> is last, and the <a href="#base-binding">base
    binding</a> has index zero.</p>

   <p>In ECMAScript implementations, objects that implement the <code><a
    href="#xblimplementationlist">XBLImplementationList</a></code> interface
    must also have a [[Get]] method that, when invoked with a property name
    that is a number, acts like the <code title=XBLImplementationList-item><a
    href="#itemn">item()</a></code> method would when invoked with that
    argument.</p>

   <h3 id=accessing><span class=secno>5.3. </span>Accessing Binding
    Implementations</h3>

   <p>Script can access binding implementations directly using the <code><a
    href="#xblimplementations">xblImplementations</a></code> member. In
    addition, in languages that support dynamic dispatch (such as
    ECMAScript), any attempts to access members of <code><a
    href="#elementxbl">ElementXBL</a></code> objects that do not correspond
    to methods or properties on the object itself but do correspond to
    members of one of the objects in the <code><a
    href="#xblimplementations">xblImplementations</a></code> list must be
    forwarded to the last object in the <code><a
    href="#xblimplementations">xblImplementations</a></code> list that is so
    matched.</p>
   <!-- XXX example needed, including one that shows this with an
  lvalue -->
   
   <h3 id=ecmascript><span class=secno>5.4. </span><dfn
    id=ecmascript1>ECMAScript Bindings</dfn></h3>

   <p>When a binding is attached, the user agent must follow the following
    steps to make the binding implementation available to scripts:</p>

   <ol>
    <li>
     <p>If this is the first time the binding defined by that <code><a
      href="#binding16">binding</a></code> element is used since that binding
      document was loaded, and if that element contains an <code><a
      href="#implementation0">implementation</a></code> element, then:</p>

     <ol>
      <li>The first <code><a
       href="#implementation0">implementation</a></code> element child of the
       <code><a href="#binding16">binding</a></code> element must have its
       code <a href="#compiling1" title="Compiling ECMAScript
       Bindings">compiled and run</a> (see below).

      <li>The return value of that script, if it is an object, must be
       forever associated with that <code><a
       href="#binding16">binding</a></code> element as that binding's
       <em>implementation prototype object</em>.
     </ol>

     <p>Otherwise, if the <code><a href="#binding16">binding</a></code>
      element doesn't contain an <code><a
      href="#implementation0">implementation</a></code> element, or if it
      does but it does not evaluate to an object, then an empty object must
      be created (by invoking the <code>Object</code> constructor in the
      global scope of the binding document), and the <code><a
      href="#binding16">binding</a></code> element's implementation prototype
      object must be forever set to that object.</p>

     <p class=note>Any further changes to <code><a
      href="#implementation0">implementation</a></code> elements will have no
      effect on the implementation prototype object of this particular
      binding.</p>

    <li>
     <p>Next, the UA must create two new ECMAScript objects by invoking the
      <code>Object</code> constructor in the global scope of the binding
      document. These objects are the <dfn id=internal>internal object</dfn>
      and the <dfn id=external0>external object</dfn>.</p>

    <li>
     <p>The [[Prototype]] property of the internal object must be set to the
      external object, and the [[Prototype]] property of the external object
      must be set to the binding's implementation prototype object.</p>

    <li>
     <p>The internal object must then have the following fields defined:</p>

     <dl>
      <dt><dfn id=external1><code>external</code></dfn>

      <dd>This field's value must be set to a reference to the external
       object.

      <dt><dfn id=boundelement><code>boundElement</code></dfn>

      <dd>This field's value must be set to a reference of the node object
       that is the bound element.

      <dt><dfn id=shadowtree><code>shadowTree</code></dfn>

      <dd>This field's value must be initially set to null. Its value is
       changed during <a href="#rules3" title="Rules for Shadow Content
       Generation">shadow content generation</a> and <a href="#rules4"
       title="Rules for Shadow Content Destruction">destruction</a>.

      <dt><dfn id=basebinding><code>baseBinding</code></dfn>

      <dd>If the binding's <code title=attr-binding-extends><a
       href="#extends">extends</a></code> attribute caused another binding to
       be attached to the bound element, then the <code><a
       href="#basebinding">baseBinding</a></code> field's value must be set
       to a reference of that binding's implementation object, if it has one
       (if that is an ECMAScript implementation as well, then that is that
       binding's external object). Otherwise, it must be set to the value
       null.
     </dl>
   </ol>

   <p>Conceptually, the internal and external objects together make the
    implementation object, but as far as the <code><a
    href="#xblimplementations">xblImplementations</a></code> property's list
    is concerned, the external object is the one that is returned as the
    implementation object.</p>

   <h4 id=compiling><span class=secno>5.4.1. </span><dfn
    id=compiling1>Compiling ECMAScript Bindings</dfn></h4>

   <p>When the user agent has to compile and run an XBL binding ECMAScript
    implementation, it must first obtain the script itself in the manner
    described in the section on <a href="#loading6">loading and running
    scripts</a>, and must then compile and execute the script using the
    binding document's global scope.</p>

   <p>If the script evaluates to an object, then that is the
    <em>implementation prototype object</em>. Otherwise, there isn't one.</p>

   <h4 id=invoking><span class=secno>5.4.2. </span>Invoking Methods on an
    ECMAScript Implementation Object</h4>

   <p>When function code of an implementation object implemented in
    ECMAScript is called, the user agent must set the <code>this</code> value
    to the <a href="#internal">internal object</a> associated with the <a
    href="#external0">external object</a> on which the function was invoked.</p>

   <h2 id=event0><span class=secno>6. </span><dfn id=event11>Event
    Handlers</dfn></h2>

   <h3 id=event1><span class=secno>6.1. </span><dfn id=event12>Event
    Forwarding</dfn></h3>

   <p>Whenever an event passes through a bound element, whether during the
    capture, target, bubble, or <a href="#the-default1" title="default
    phase">default</a> phases, the user agent must also invoke any
    appropriate event listeners attached to the binding's first <code><a
    href="#handlers0">handlers</a></code> element.</p>

   <p>When events are forwarded in this manner, the event handlers attached
    to the <code><a href="#handlers0">handlers</a></code> element must fire
    after any event handlers on the bound element itself in the capture
    phase, after the event has been retargeted to shadow nodes, if
    appropriate; and before any event handlers on the bound element itself in
    the target and bubble phases, before the event has been retargeted to the
    bound element, if appropriate. (See: <a href="#event13">event flow and
    targeting across shadow scopes</a>.)</p>

   <p>Event handlers must fire first on the <a href="#most-derived">most
    derived binding</a> and then on its inherited binding, continuing all the
    way up the chains to the <a href="#base-binding">base binding</a>. A
    derived handler then has a way of preventing the event from flowing to
    the handlers of the bindings it inherits from, by using the
    <code>stopImmediatePropagation()</code> method.</p>

   <p>Event handlers may be attached to the <code><a
    href="#handlers0">handlers</a></code> element using any method, including
    DOM3 Events' <code>addEventListener()</code> method and the <code><a
    href="#handler0">handler</a></code> XBL element. All event handlers
    registered on the first <code><a href="#handlers0">handlers</a></code>
    element of the binding are considered, not just those attached using the
    <code><a href="#handler0">handler</a></code> element.</p>

   <div class=example>
    <p>In the following example, the bound element is the
     <code>hotspot</code> element. When either it is clicked or the element
     inside it is clicked, an alert is generated containing the text "Hello
     World".</p>

    <p>The bound document is:</p>

    <pre>&lt;hotspot message="Hello World"&gt;
  &lt;instruction&gt; Activate this text. &lt;/instruction&gt;
&lt;/hotspot&gt;</pre>

    <p>The binding is:</p>

    <pre>&lt;binding&gt;
  &lt;handlers&gt;
    &lt;handler event="click"&gt;
      alert(event.currentTarget.getAttribute('message'));
    &lt;/handler&gt;
  &lt;/handlers&gt;
&lt;/binding&gt;</pre>

    <p>Note that the event object passed to the <code><a
     href="#handlers0">handlers</a></code>'s handlers is the same as would
     have been passed to event handlers registered directly on the bound
     element. This is why <code>currentTarget</code> in this example points
     to the bound element.</p>
   </div>

   <h3 id=registering><span class=secno>6.2. </span><dfn
    id=registering1>Registering Event Handlers with the <code>handler</code>
    Element</dfn></h3>

   <p>Whenever the <code>event</code> or <code>phase</code> attributes of an
    XBL <code><a href="#handler0">handler</a></code> element change, or
    whenever a <code><a href="#handler0">handler</a></code> element's parent
    changes, an event listener must be registered on the element's parent
    element, if it has one; and if an event listener had previously been
    registered for that <code><a href="#handler0">handler</a></code> element,
    it must be removed.</p>

   <p>In terms of the DOM3 Events <code>addEventListenerNS()</code> method,
    the arguments used when registering the new event listener must be set as
    follows:</p>

   <dl>
    <dt><code>namespaceURI</code>

    <dd>Always <code>null</code> in this version of XBL.

    <dt><code>type</code>

    <dd>The literal value of the <code title=attr-handler-event><a
     href="#event9">event</a></code> attribute, or the empty string if the
     attribute is missing.

    <dt><code>listener</code>

    <dd>An object implementing the <code>EventListener</code> interface that
     invokes the <code><a href="#handler0">handler</a></code> element as
     described below.

    <dt><code>useCapture</code>

    <dd>True if the <code title=attr-handler-phase><a
     href="#phase">phase</a></code> attribute is present and has the literal
     value <code>capture</code>, otherwise false.

    <dt><code>evtGroup</code>

    <dd>Always <code>null</code> in this version of XBL. (Event listeners
     registered with <code><a href="#handler0">handler</a></code> elements
     are registered in the default event group.)
   </dl>

   <p>Thus, the <code title=attr-handler-event><a
    href="#event9">event</a></code> attribute specifies the event type, and
    the <code title=attr-handler-phase><a href="#phase">phase</a></code>
    attribute the listener type. If the <code title=attr-handler-event><a
    href="#event9">event</a></code> attribute is missing or its value is the
    empty string, it is <a href="#in-error">in error</a>. If the <code
    title=attr-handler-phase><a href="#phase">phase</a></code> attribute is
    present but has a value other than the literal strings
    <code>capture</code>, <code>target</code>, <code>bubble</code>, or
    <code>default-action</code>, it is <a href="#in-error">in error</a>.
    (However, their being <a href="#in-error">in error</a> does not affect
    the processing model described above.)</p>

   <p>When a <code><a href="#handler0">handler</a></code> element is invoked
    by the object passed to the <code>addEventListenerNS()</code> method, the
    user agent must check that the event in question was forwarded to a
    <code><a href="#handlers0">handlers</a></code> element from a bound
    element, and that that <code><a href="#handlers0">handlers</a></code>
    element is the parent node of the <code><a
    href="#handler0">handler</a></code> element.</p>

   <p>If that isn't the case, then the invocation must do nothing.</p>

   <p>Otherwise, if that condition <em>is</em> met, then the UA must check
    any relevant filters specified on the <code><a
    href="#handler0">handler</a></code> element. If any of them fail to match
    the event, then the invocation must not do anything else. (The filter
    attributes are defined in the next few sections.)</p>

   <p>Otherwise, if all the filters match, then the user agent must execute
    the contents of the <code><a href="#handler0">handler</a></code> element,
    treating it as being in the language specified by the <code
    title=attr-xbl-script-type><a href="#script-type">script-type</a></code>
    attribute. (See: <a href="#loading6">loading and running scripts</a>, <a
    href="#event14">event handlers implemented in ECMAScript</a>.) The script
    must be run in the context of the binding document (and not, e.g., in the
    bound document's context).</p>

   <p>The <code title=attr-handler-propagate><a
    href="#propagate">propagate</a></code> attribute specifies whether, after
    processing all listeners at the current node, the event is allowed to
    continue on its path (either in the capture or the bubble phase). The
    possible values are <code>stop</code> and <code>continue</code> (the
    default). If <code>stop</code> is specified, then after the event handler
    has been fired, the event's <code>stopPropagation()</code> method must be
    called.</p>

   <p>The <code title=attr-handler-default-action><a
    href="#default-action">default-action</a></code> attribute specifies
    whether, after processing of all listeners for the event, the default
    action for the event (if any) should be performed or not. For instance,
    in XHTML the default action for a mouse click on an <code>html:a</code>
    element or one of its descendants is to traverse the link. The possible
    values are <code>cancel</code> and <code>perform</code> (the default). If
    <code>cancel</code> is specified, then after the event handler has been
    fired, the event's <code>preventDefault()</code> method must be called.</p>

   <p>The <code title=attr-handler-trusted><a
    href="#trusted">trusted</a></code> attribute is a filter that, if set to
    the value <code>true</code>, matches only events whose <code
    title=event-trusted><a href="#trusted0">trusted</a></code> attribute is
    true. Otherwise, if it has another value or if it is not specified, any
    event matches this filter. This filter can be used regardless of the type
    of the event.</p>

   <p>The <code title=attr-handler-phase><a href="#phase">phase</a></code>
    attribute is a filter that matches only events that are in the phase it
    specifies. If the attribute has the value <code>capture</code>, it must
    only match events whose <code>eventPhase</code> attribute has the value
    <code>CAPTURING_PHASE</code> (1). If the attribute has the value
    <code>target</code>, it must only match events whose
    <code>eventPhase</code> attribute has the value <code>AT_TARGET</code>
    (2). If the attribute has the value <code>default-action</code>, it must
    only match events whose <code>eventPhase</code> attribute has the value
    0x78626C44 <!--
  "xblD" in ASCII --> (2019716164). This is the value
    used in the <a href="#the-default1">default phase</a>. If it is specified
    and has another value, it must only match events whose
    <code>eventPhase</code> attribute has the value <code>BUBBLE_PHASE</code>
    (3). If it is not specified, it must only match events whose
    <code>eventPhase</code> attribute has the value <code>AT_TARGET</code>
    (2) or <code>BUBBLE_PHASE</code> (3). (If it isn't specified, then it
    isn't registered as a capture event listener, so the handler would never
    see the value <code>CAPTURING_PHASE</code> (1).) This filter can be used
    regardless of the type of the event.</p>

   <p>In addition to the <code title=attr-handler-trusted><a
    href="#trusted">trusted</a></code> and <code title=attr-handler-phase><a
    href="#phase">phase</a></code> filters, event-specific filters may be
    used, as described in the following sections. Only filters appropriate to
    the given event type may be used; all other filter attributes, if
    specified, are <a href="#in-error">in error</a> and UAs must <a
    href="#ignoring">ignore</a> them.</p>

   <h3 id=mouse><span class=secno>6.3. </span><dfn id=mouse1>Mouse Event
    Handler Filters</dfn></h3>

   <p>For events that use or derive from the <code>MouseEvent</code>
    interface, three event-specific filter attributes may be used. <a
    href="#refsDOM3EVENTS">[DOM3EVENTS]</a></p>

   <p>The filters are:</p>

   <dl>
    <dt><code title=attr-handler-button><a href="#button">button</a></code>

    <dd>A list of values, at least one of which has to match the
     <code>button</code> attribute on the event object for the XBL event
     handler to fire. If the attribute is not specified, then any value of
     the <code>button</code> attribute on the event object must be considered
     a match. If the value is specified, it must be a <a
     href="#attributes22">space-separated</a> list of values, each of which
     must be one or more digits in the range U+0030 DIGIT ZERO (0) to U+0039
     DIGIT NINE (9). Each string must be interpreted as a base ten integer
     and then compared to the value of the <code>button</code> attribute on
     the event object. If none of the values match the <code>button</code>
     attribute, then the event handler must not be executed.

    <dt><code title=attr-handler-click-count><a
     href="#click-count">click-count</a></code>

    <dd>A list of values, at least one of which has to match the
     <code>detail</code> attribute on the event object for the XBL event
     handler to fire. If the attribute is not specified, then any value of
     the <code>detail</code> attribute on the event object must be considered
     a match. If the value is specified, it must be a <a
     href="#attributes22">space-separated</a> list of values, each of which
     must be one or more digits in the range U+0030 DIGIT ZERO (0) to U+0039
     DIGIT NINE (9). Each string must be interpreted as a base ten integer
     and then compared to the value of the <code>detail</code> attribute on
     the event object. If none of the values match the <code>detail</code>
     attribute, then the event handler must not be executed. Note that this
     is checked for <em>any</em> event that uses the <code>MouseEvent</code>
     interface, not just those for which <code>detail</code> is defined.
     Authors should take care to not specify this attribute with, for
     example, <code>mouseover</code> events, since in that context
     <code>detail</code> is undefined.

    <dt><code title=attr-handler-modifiers><a
     href="#modifiers1">modifiers</a></code>

    <dd>See <a href="#modifiers2">modifiers</a>.
   </dl>

   <h3 id=key-event><span class=secno>6.4. </span><dfn id=key-event1>Key
    Event Handler Filters</dfn></h3>

   <p>For events that use or derive from the <code>KeyboardEvent</code>
    interface, three event-specific filter attributes may be used. <a
    href="#refsDOM3EVENTS">[DOM3EVENTS]</a></p>

   <p>The filters are:</p>

   <dl>
    <dt><code title=attr-handler-key><a href="#key">key</a></code>

    <dd>The key identifier. If specified, the value must be an exact literal
     match of the <code>keyIdentifier</code> attribute of the event object.
     For example, <code>Enter</code>. If this filter is specified but the
     <code title=attr-handler-modifiers><a
     href="#modifiers1">modifiers</a></code> attribute is not, the user agent
     must act as if the <code title=attr-handler-modifiers><a
     href="#modifiers1">modifiers</a></code> attribute had been set with the
     value "<code>none</code>". If specified, the value of this attribute
     must be a valid value of the <code>keyIdentifier</code> attribute.

    <dt><code title=attr-handler-key-location><a
     href="#key-location">key-location</a></code>

    <dd>If specified, this attribute's value must be a <a
     href="#attributes22">space-separated</a> list of values from the four
     literal (case-sensitive) keywords <code>standard</code>,
     <code>left</code>, <code>right</code>, and <code>numpad</code> (with no
     duplicates), which map to the DOM values 0x00, 0x01, 0x02, or 0x03
     respectively. If specified, the event object's <code>keyLocation</code>
     attribute must have a value equal to the numeric value of one of the
     specified keywords. Unknown and duplicate values are <a
     href="#in-error">in error</a> and UAs must <a
     href="#ignoring">ignore</a> them (although without dropping any <a
     href="#correct">correct</a> values).

    <dt><code title=attr-handler-modifiers><a
     href="#modifiers1">modifiers</a></code>

    <dd>See <a href="#modifiers2">modifiers</a>.
   </dl>

   <h3 id=text-input><span class=secno>6.5. </span><dfn id=text-input1>Text
    Input Event Handler Filters</dfn></h3>

   <p>For events that use or derive from the <code>TextEvent</code>
    interface, one event-specific filter attribute may be used. <a
    href="#refsDOM3EVENTS">[DOM3EVENTS]</a></p>

   <p>The filter is:</p>

   <dl>
    <dt><code title=attr-handler-text><a href="#text">text</a></code>

    <dd>The text data to match. If specified, the value must be an exact
     literal match of the <code>data</code> attribute of the event object.
     The value of the attribute may be any string.
   </dl>

   <h3 id=mutation><span class=secno>6.6. </span><dfn id=mutation1>Mutation
    Event Handler Filters</dfn></h3>

   <p>For events that use or derive from the <code>MutationEvent</code>
    interface, four event-specific filter attributes may be used. <a
    href="#refsDOM3EVENTS">[DOM3EVENTS]</a></p>

   <p>The filters are:</p>

   <dl>
    <dt><code title=attr-handler-prev-value><a
     href="#prev-value">prev-value</a></code>

    <dd>If specified, the value must be an exact literal match of the
     <code>prevValue</code> attribute of the event object. The value of the
     attribute may be any string.

    <dt><code title=attr-handler-new-value><a
     href="#new-value">new-value</a></code>

    <dd>If specified, the value must be an exact literal match of the
     <code>newValue</code> attribute of the event object. The value of the
     attribute may be any string.

    <dt><code title=attr-handler-attr-name><a
     href="#attr-name">attr-name</a></code>

    <dd>If specified, the value must be an exact literal match of the
     <code>attrName</code> attribute of the event object. The value of the
     attribute may be any string.

    <dt><code title=attr-handler-attr-change><a
     href="#attr-change">attr-change</a></code>

    <dd>If specified, this attribute's value must be a <a
     href="#attributes22">space-separated</a> list of values from the three
     literal (case-sensitive) keywords <code>modification</code>,
     <code>addition</code>, <code>removal</code> (with no duplicates), which
     map to the DOM values 0x00, 0x01, or 0x02 respectively. If specified,
     the event object's <code>attrChange</code> attribute must have a value
     equal to the numeric value of one of the specified keywords. Unknown and
     duplicate values are <a href="#in-error">in error</a> and the UA must <a
     href="#ignoring">ignore</a> them, although without causing <a
     href="#correct">correct</a> values to be dropped.
   </dl>

   <p>There are currently no attributes specifically designed to be used with
    events that use the <code>MutationEventName</code> interface.</p>

   <h3 id=modifiers><span class=secno>6.7. </span><dfn
    id=modifiers2>Modifiers</dfn></h3>

   <p>The <code title=attr-handler-modifiers><a
    href="#modifiers1">modifiers</a></code> attribute specifies a filter
    dependent on which keyboard accelerator keys ("modifiers") are set.</p>

   <p>The attribute is a <a href="#attributes22">space-separated</a> list of
    values.</p>

   <p>To process this filter, the user agent must first invoke the
    <code>getModifierState()</code> method of the event for all the modifiers
    the UA supports, noting the return value for each modifier. The user
    agent must then walk through all the values in the <code
    title=attr-handler-modifiers><a href="#modifiers1">modifiers</a></code>
    attribute, as described in the list below. The filter matches if all the
    modifiers that returned true are accounted for, and none of the values
    made the filter fail.</p>

   <p class=note>The <code>getModifierState()</code> method, and the
    modifiers that go with it, are defined in DOM3 Events. <a
    href="#refsDOM3EVENTS">[DOM3EVENTS]</a></p>

   <p>By default, only the <code>CapsLock</code>, <code>NumLock</code>, and
    <code>Scroll</code> modifiers are accounted for. Values on the attribute
    cause other modifiers to be accounted for.</p>

   <p>Before comparing the modifiers to the attribute values, the user agent
    must convert all the modifiers to lowercase.</p>

   <p>User agents must recognize the <code>accel</code> keyword as a synonym
    for the modifier that is the primary accelerator key on the platform (on
    Windows, this would typically be <code>control</code>, on Mac it would
    typically be <code>meta</code>).</p>

   <p>User agents must also recognize the <code>access</code> keyword as a
    synonym for the primary shortcut mnemonic key on the platform (on
    Windows, this would typically be <code>alt</code>).</p>

   <p>The attribute values must be handled as follows:</p>

   <dl>
    <dt><code>any</code>

    <dd>If the keyword <code>any</code> is specified, then all the modifiers
     are accounted for.

    <dt><code>none</code>

    <dd>The keyword <code>none</code> makes the filter fail if any modifiers
     returned true, except for the <code>CapsLock</code>,
     <code>NumLock</code>, and <code>Scroll</code> modifiers, which are
     ignored for the purposes of this keyword.

    <dt><code>+<var>modifier</var></code>

    <dd>The <var>modifier</var> modifier is accounted for. If the given
     modifier does not correspond to the lowercase version of one of the
     modifiers supported by the UA, or if the <code>getModifierState()</code>
     method did not actually return true for the corresponding modifier, then
     it makes the filter fail.

    <dt><code>-<var>modifier</var></code>

    <dd>If the <code>getModifierState()</code> method returned true for the
     modifier corresponding to <var>modifier</var>, then it makes the filter
     fail.

    <dt><code><var>modifier</var>?</code>

    <dd>The <var>modifier</var> modifier is accounted for. If the
     <code>getModifierState()</code> method did not actually return true for
     the modifier corresponding to <var>modifier</var>, the value is ignored.

    <dt>Anything else ("<code><var>modifier</var></code>")

    <dd>Treated the same as <code>+<var>modifier</var></code>.
   </dl>

   <p>A modifier can be listed multiple times, though this is not
    particularly useful.</p>

   <div class=example>
    <p>Here are some examples of what this means:</p>

    <dl>
     <dt><code title="">modifiers</code> not specified

     <dd>The modifiers are ignored, unless the <code
      title=attr-handler-key><a href="#key">key</a></code> attribute is
      specified, in which case the event handler is only invoked if no
      modifiers are pressed.

     <dt><code title="">modifiers=""</code>

     <dt><code title="">modifiers="none"</code>

     <dd>The event handler is only invoked if no modifiers are pressed.

     <dt><code title="">modifiers="any"</code>

     <dd>The modifiers are ignored.

     <dt><code title="">modifiers="alt control"</code>

     <dd>The filter matches if both alt and control were pressed, and no
      others.

     <dt><code title="">modifiers="alt control?"</code>

     <dd>The filter matches if alt was pressed, and no others, except maybe
      control.

     <dt><code title="">modifiers="any -control"</code>

     <dd>The filter matches if the control key was not pressed, regardless of
      the state of other modifiers.

     <dt><code title="">modifiers="Alt"</code>

     <dd>Never matches, since the user agent must compare the given values to
      <em>lowercase</em> modifier names.

     <dt><code title="">modifiers="accel -capslock"</code>

     <dd>Matches when the platform's accelerator key is pressed, but only if
      the caps lock key is not active.

     <dt><code title="">modifiers="alt alt alt"</code>

     <dd>Same as just listing the alt modifier once: the filter matches if
      only the alt modifier is pressed.

     <dt><code title="">modifiers="+alt -accel"</code>

     <dd>Matches when the platform's accelerator key is pressed, but the alt
      modifier is not pressed. If the platform's accelerator key is in fact
      the alt key, this filter can never match.
    </dl>
   </div>

   <h3 id=event2><span class=secno>6.8. </span><dfn id=event13>Event Flow and
    Targeting Across Shadow Scopes</dfn></h3>

   <p>DOM events can fire on shadow targets just as they can on explicit
    targets. Events must flow through the <a href="#final0">final flattened
    tree</a>. As long as the event flows within the same shadow tree <a
    href="#shadow9" title="shadow scope">scope</a>, it is no different from
    the behavior outlined in the DOM Events specification.</p>

   <p>Whenever events originating from a shadow tree flow from a shadow
    element in that shadow tree to the bound element, one of two actions
    occurs. Either the event is retargeted so that the bound element becomes
    the target, or the event is stopped and flow proceeds to the next phase.
    Whenever an event is retargeted, the event is cloned, with the clone's
    <code>target</code> field set to the bound element.</p>

   <p>The action taken (retarget vs. stop) is specific to the event type. In
    general, UI events must be retargeted and mutation events must be
    stopped. Exceptions to the rule are noted below. The goal of this
    retargeting or stopping is to stop outer shadow scopes from being exposed
    to nodes from inner shadow scopes, and to stop outer shadow scopes from
    getting apparently meaningless events that only make sense in the context
    of inner shadow scopes.</p>

   <p>During the capture phase, the rules are exactly reversed. The first
    node to see the event is the node after which bubbling stops. The target
    node, when the event is passing through a node at a higher shadow scope
    than the event target, is always the bound element in whose shadow
    content the event target lies.</p>

   <p>When an event is retargetted at a bound element, the bound element's
    event handlers must see the event only in the target phase. The capture
    phase listeners must not be triggered for the bound element.</p>

   <p>The timing of event retargeting is such that when the event is
    forwarded to the <code><a href="#handlers0">handlers</a></code> element,
    the binding's handlers see the relevant shadow tree node as the target,
    rather than the bound element as the target. (See: <a
    href="#event12">event forwarding</a>.)</p>

   <p>Events bubble into deeper scopes; for example, an event fired on a
    bound element's <a href="#explicit3" title="explicit children">explicit
    child</a> bubbles into the element containing the <code><a
    href="#content0">content</a></code> element the element was assigned to.
    This does not cause any event retargeting to take place, either when
    entering the deeper scope or when leaving it, since such an event does
    not actually originate in that shadow tree.</p>

   <p>Any method invocations on any clones of the event object must also be
    forwarded to the original event and all the clones, so that attempts to
    stop propagation and cancel the default action affect the event
    regardless of how many scopes it has crossed.</p>

   <div class=example>
    <p>Bound document:</p>

    <pre>&lt;root xmlns=""&gt;
 &lt;bound/&gt;
&lt;/root&gt;</pre>

    <p>Binding template applied to the <code>bound</code> element:</p>

    <pre>  ...
  &lt;xbl:template&gt;
   &lt;shadow xmlns=""&gt;
    &lt;target/&gt;
   &lt;/shadow&gt;
  &lt;/xbl:template&gt;
  ...</pre>

    <p>If someone clicks the "target" element, the click event is dispatched
     as follows:</p>

    <ol>
     <li>The capture listeners on <code>root</code>. Capture phase, target is
      <code>bound</code>.

     <li>The capture listeners on the binding's <code><a
      href="#handlers0">handlers</a></code>. Capture phase, target is
      <code>target</code>.

     <li>The capture listeners on <code>shadow</code>. Capture phase, target
      is <code>target</code>.

     <li>The bubbling listeners on <code>target</code>. Target phase, target
      is <code>target</code>.

     <li>The bubbling listeners on <code>shadow</code>. Bubbling phase,
      target is <code>target</code>.

     <li>The bubbling listeners on the binding's <code><a
      href="#handlers0">handlers</a></code>. Bubbling phase, target is
      <code>target</code>.

     <li>The bubbling listeners on <code>bound</code>. Target phase, target
      is <code>bound</code>.

     <li>The bubbling listeners on <code>root</code>. Bubbling phase, target
      is <code>bound</code>.

     <li>The default action listeners on the binding's <code><a
      href="#handlers0">handlers</a></code>. Default phase, target is
      <code>target</code>.

     <li>The UA's default action listeners for <code>target</code>. Default
      phase, target is <code>target</code>.
    </ol>
   </div>

   <h3 id=the-default><span class=secno>6.9. </span><dfn id=the-default1
    title="default phase">The Default Phase</dfn></h3>

   <p>If an event bubbles through or is targeted at one or more bound
    elements, and the event is not canceled (after the capture, target, and
    bubble phases have all completed, its <code>defaultPrevented</code>
    attribute is still false), then the event's <code>eventPhase</code>
    attribute must be set to the value 0x78626C44 <!-- "xblD" in ASCII -->
    (2019716164), and then the event must be <a href="#event12" title="event
    forwarding">forwarded</a> to the relevant <code><a
    href="#handlers0">handlers</a></code> elements of all the bound elements
    the event bubbled through or was targeted at in those bubble and target
    phases, in reverse tree order (starting from the target node and walking
    the tree towards the <code>Document</code> node), with
    <code>currentTarget</code> set to the relevant bound element each time.
    If the event is canceled (that is, if the <code>defaultPrevented</code>
    attribute becomes true) while being forwarded to one of these bound
    elements, subsequent bound elements must not receive the event.</p>

   <p>If the event has a UA default action, it must only perform it if the
    <code>defaultPrevented</code> attribute is still false after it has been
    so forwarded.</p>

   <p>The <code>stopPropagation()</code> and
    <code>stopImmediatePropagation()</code> methods must have no effect
    during this "default" phase.</p>

   <h3 id=the-focus><span class=secno>6.10. </span>The <code>focus</code>,
    <code>DOMFocusIn</code>, <code>blur</code>, and <code>DOMFocusOut</code>
    Events</h3>

   <p>If shadow content underneath a focusable bound element loses focus and
    shadow content also underneath the bound element takes focus, then both
    focus change events must be stopped. As far as the bound element is
    concerned, it retains focus throughout the two events. (Other
    specifications may go into more detail as to how to determine if an
    element can be focused.)</p>

   <p>If the focus moves from the bound element's shadow content to a node
    completely outside the bound element, or vice versa, then the respective
    events must be retargetted instead.</p>

   <p>The <span>'nav-index'</span> property defined in the CSS UI module <a
    href="#refsCSS3UI">[CSS3UI]</a> can be used to specify the tab order for
    focusable elements. This property can be specified on shadow content.
    Each shadow scope has a unique tab order. The <span>'nav-index'</span>
    values used in one shadow scope are ignored by other shadow scopes. The
    tab order is resolved in the shadow tree first to produce a list of
    elements in the tab order. This list is substituted in place of the bound
    element in the bound element's tree tab order.</p>

   <div class=example>
    <p>As an example, consider the HTML file upload control. It is a
     focusable element that in turn is made up of two focusable shadow
     elements: a text field and a button. Tab indices can be specified on the
     text field and the button to indicate the order in which the components
     of the file control should be accessed when tabbing.</p>

    <p>When the user tabs such that the file control should become focused,
     the user agent determines if any shadow content should also become
     focused, using the tab order specified by the shadow content elements.
     It then generates a focus event on the text field inside the file
     control. As this event flows across shadow scopes, it is retargeted to
     be a focus event on the file control itself.</p>

    <p>Focus events should also be stopped if the bound element is already
     focused. For example, if the user has already focused the text field
     within an HTML file upload control, then the file upload control is now
     also focused. If the user then focuses the button inside the file upload
     control, the focus event generated for the button is stopped before it
     reaches the file control, since the file control is already focused.</p>
   </div>

   <p>Because content in multiple shadow scopes can be focused, the CSS
    <code>:focus</code> pseudo-element is hierarchical in the presence of
    XBL, with up to one element in each shadow scope matching the
    pseudo-class. Style rules can be written with the assumption that they
    will match (in the above example) both the file control and the element
    focused inside the file control. In other words, an arbitrary chain of
    elements can be in the <code>:focus</code> state at the same time.</p>

   <p class=note>Further specifications may describe in more detail the
    interaction of arbitrary chains of elements that can be in the
    <code>:focus</code> state at the same time.</p>

   <h3 id=the-mouseover><span class=secno>6.11. </span>The
    <code>mouseover</code> and <code>mouseout</code> Events</h3>

   <p>Mouseover and mouseout events must be retargeted if the pointing device
    genuinely moves onto (enters) or is moved away (exits) the bound element
    (in addition to entering or exiting some shadow content). If, however,
    the user has simply moved the pointing device from one element in the
    shadow tree to another element in the same shadow tree, without entering
    or exiting the bound element itself, then the event must be stopped.</p>

   <div class=example>
    <p>For example, if the user enters the HTML file upload control from the
     left, a mouseover event is generated for the shadow text field. Because
     this event also constitutes a mouseover of the file control itself, the
     event is retargeted when it flows across shadow scopes. If the user then
     moves the mouse from the text field to the button, a mouseout is
     generated for the text field, followed by a mouseover of the button.</p>

    <p>Since neither of these events constitutes a mouseover or mouseout of
     the file control itself, the events are not allowed to flow to the file
     control. If the user continues moving to the right and leaves the
     button, then the mouseout generated will be retargeted, since the file
     control will also have been exited.</p>
   </div>

   <h3 id=event3><span class=secno>6.12. </span><dfn id=event14>Event
    Handlers Implemented in ECMAScript</dfn></h3>

   <p>When a script of a <code><a href="#handler0">handler</a></code> element
    implemented in ECMAScript is executed the user agent must set the
    <code>this</code> value to the <a href="#internal">internal object</a>
    part of the implementation object of the binding with which the <code><a
    href="#handler0">handler</a></code> element is associated. The script
    must be executed as a function body with one argument, called
    <code>event</code>, which is a reference to the <code>Event</code> object
    representing the event. The script must be compiled and executed each
    time it is accessed, so that any dynamic changes to the event handler
    code in the binding document take effect.</p>

   <h2 id=dom-interfaces><span class=secno>7. </span><dfn
    id=dom-interfaces1>DOM Interfaces</dfn></h2>

   <p>XBL introduces a few XBL-specific interfaces.</p>

   <h3 id=the-documentxbl><span class=secno>7.1. </span>The <code><a
    href="#documentxbl">DocumentXBL</a></code> Interface</h3>

   <p>The <code><a href="#documentxbl">DocumentXBL</a></code> interface
    contains methods for loading and obtaining binding documents. The
    interface is implemented by DOM documents that support having their
    elements bound by XBL.</p>

   <dl>
    <dt>IDL Definition

    <dd>
     <pre class=idl>interface <dfn id=documentxbl>DocumentXBL</dfn> {
  readonly attribute NamedNodeMap <a href="#bindingdocuments">bindingDocuments</a>;
  Document <a href="#loadbindingdocument">loadBindingDocument</a>(in DOMString documentURI);
};</pre>

    <dt>Attributes

    <dd>
     <dl>
      <dt><dfn id=bindingdocuments><code
       class=attribute-name>bindingDocuments</code></dfn> of type <code
       class=dom>NamedNodeMap</code>, readonly

      <dd>The <code><a href="#bindingdocuments">bindingDocuments</a></code>
       attribute must return a <code>NamedNodeMap</code> of all the binding
       documents loaded by the document. Documents are referenced using their
       URIs as the node names, with null namespaces. The
       <code>NamedNodeMap</code> must be live, and must raise
       <code>NO_MODIFICATION_ALLOWED_ERR</code> on any attempts at
       modification or deletion.
     </dl>

    <dt>Methods

    <dd>
     <dl>
      <dt><dfn id=loadbindingdocument><code
       class=method-name>loadBindingDocument</code></dfn>

      <dd>
       <p>The <code><a
        href="#loadbindingdocument">loadBindingDocument</a></code> method
        must synchronously load the specified binding document (unless it has
        <a href="#loading5" title="loading external resources">already been
        loaded</a>), as well as any binding documents that are required by
        that binding document due to <a href="#extends"
        title=attr-binding-extends>explicit inheritance</a>, and any bindings
        defined by that document must be applied to matching elements in the
        document that corresponds to this <code><a
        href="#documentxbl">DocumentXBL</a></code> object. The method must
        then return the binding document's <code>Document</code> object.
        (See: <a href="#binding17">binding attachment and detachment</a>.) If
        the load succeeded, it is also added to the <code><a
        href="#bindingdocuments">bindingDocuments</a></code> attribute. If
        the load fails, this method must return null.</p>

       <dl>
        <dt>Parameters

        <dd>
         <dl>
          <dt><code class=parameter-name>documentURI</code> of type <code
           class=dom>DOMString</code>

          <dd>The <a href="#attributes24">URI</a> of a binding document.
         </dl>

        <dt>Return Value

        <dd>
         <dl>
          <dt><code>Document</code>

          <dd>The return value of <code><a
           href="#loadbindingdocument">loadBindingDocument()</a></code> is
           the <code>Document</code> object of the binding document that was
           loaded, or <code>null</code> if the load failed.
         </dl>

        <dt>No Exceptions
       </dl>
     </dl>
   </dl>

   <h3 id=the-elementxbl><span class=secno>7.2. </span>The <code><a
    href="#elementxbl">ElementXBL</a></code> Interface</h3>

   <p>The <code><a href="#elementxbl">ElementXBL</a></code> interface
    contains methods for adding or removing bindings from an element. The
    interface is implemented by all <code>Element</code> nodes (regardless of
    whether they are currently involved with any XBL processing) and may be
    obtained using binding-specific casting methods on an
    <code>Element</code> interface.</p>

   <dl>
    <dt>IDL Definition

    <dd>
     <pre class=idl>interface <dfn id=elementxbl>ElementXBL</dfn> {
  readonly attribute XBLImplementationList <a href="#xblimplementations">xblImplementations</a>;
  void <a href="#addbinding">addBinding</a>(in DOMString bindingURI);
  void <a href="#removebinding">removeBinding</a>(in DOMString bindingURI);
  boolean <a href="#hasbinding">hasBinding</a>(in DOMString bindingURI);
};</pre>

    <dt>Attributes

    <dd>
     <dl>
      <dt><code><a href="#xblimplementations">xblImplementations</a></code>
       of type <code><a
       href="#xblimplementationlist">XBLImplementationList</a></code>,
       readonly

      <dd>See <a href="#binding23">binding implementations</a>.
     </dl>

    <dt>Methods

    <dd>
     <dl>
      <dt><dfn id=addbinding><code class=method-name>addBinding</code></dfn>

      <dd> The <code><a href="#addbinding">addBinding</a></code> method must
       attach the specified binding (and any bindings that the binding
       inherits from) to the element. This call is not necessarily
       synchronous. The binding may not be attached yet when the call
       completes.
       <dl>
        <dt>Parameters

        <dd>
         <dl>
          <dt><code class=parameter-name>bindingURI</code> of type
           <code>DOMString</code>

          <dd>A <a href="#attributes24">URI</a> that specifies the location
           of a specific binding to attach.
         </dl>

        <dt>No Return Value

        <dt>Exceptions

        <dd>
         <dl>
          <dt><code>HIERARCHY_REQUEST_ERR</code>

          <dd>This exception must be raised if the node is not an element.
         </dl>
       </dl>

      <dt><dfn id=removebinding><code
       class=method-name>removeBinding</code></dfn>

      <dd> The <code><a href="#removebinding">removeBinding</a></code> method
       must detach the specified binding (and any bindings that the binding
       inherits from explicitly using the <code>extends</code> attribute)
       from the element. This method can only detach bindings that were
       attached using <code><a href="#addbinding">addBinding</a></code>. If
       the binding in question is not attached to this element (or was
       attached through another attachment mechanism) then the method must do
       nothing.
       <dl>
        <dt>Parameters

        <dd>
         <dl>
          <dt><code class=parameter-name>bindingURI</code> of type
           <code>DOMString</code>

          <dd>A <a href="#attributes24">URI</a> that specifies the location
           of a specific binding to detach.
         </dl>

        <dt>No Return Value

        <dt>No Exceptions
       </dl>

      <dt><dfn id=hasbinding><code class=method-name>hasBinding</code></dfn>

      <dd>
       <p>The <code><a href="#hasbinding">hasBinding</a></code> method must
        check the bindings applied to the element and compares each binding's
        URI with the parameter passed. If any of the bindings matches the
        specified URI, then the method must return true, otherwise it must
        return false. This can be used to check if an element has been bound
        to a particular binding in in order to ensure that the expected
        methods and attributes are available.</p>

       <p>Any bindings attached to the element (including, e.g., those
        attached using CSS) are examined by this method.</p>

       <p class=example>For example widgets may walk up their ancestors
        looking for an element that has been bound to a form-container
        binding in order to locate their scope (so that radio buttons may
        properly be mutually exclusive, or so that a submit button can
        properly submit a form).</p>

       <dl>
        <dt>Parameters

        <dd>
         <dl>
          <dt><code class=parameter-name>bindingURI</code> of type
           <code>DOMString</code>

          <dd>A <a href="#attributes24">URI</a> that specifies the location
           of a specific binding for which to look.
         </dl>

        <dt>Returns

        <dd>
         <dl>
          <dt><code>boolean</code>

          <dd><code>true</code> if any of the bindings match the parameter,
           <code>false</code> otherwise.
         </dl>

        <dt>No Exceptions
       </dl>
     </dl>
   </dl>

   <h4 id=scoping><span class=secno>7.2.1. </span>Scoping and Access Using
    the DOM</h4>

   <p>In effect the shadow content exists in its own insulated pocket within
    the document, its <a href="#shadow9">shadow scope</a>. Bound elements
    have no knowledge of their shadow children in terms of DOM Core <a
    href="#refsDOM3CORE">[DOM3CORE]</a>. The shadow content is not accessible
    via the <code>childNodes</code> list for the bound element, nor is it
    accessible using <code>firstChild</code>/<code>nextSibling</code> to
    iterate over the children of the bound element.</p>

   <p>DOM methods that can be invoked on elements (e.g.,
    <code>getElementsByTagName()</code>) will only see nodes that are in the
    same shadow scope. Methods invoked on the document (e.g., <code
    title="">getElementById</code>) only see nodes that are not in shadow
    trees.</p>

   <p>On shadow content nodes, <code>ownerDocument</code> always points to
    the document from which the nodes were cloned.</p>

   <p>Elements in different shadow scopes may have clashing IDs. IDs need
    only be unique within each shadow scope.</p>

   <p>Elements that are the root of a shadow tree (the cloned <code><a
    href="#template0">template</a></code> elements) cannot be inserted into a
    document. Any attempt to do so must raise a
    <code>HIERARCHY_REQUEST_ERR</code>. <!-- (This is because if you
  did, you would end up having two ways to reach the nodes in the
  <span>final flattened tree</span>, which would be mighty confusing
  for things like getComputedStyle() --></p>

   <p>Manipulating the DOM of a shadow tree (<code><a
    href="#content0">content</a></code> elements being moved about or even
    removed altogether, <code title=attr-attr><a
    href="#xblattr0">xbl:attr</a></code> attributes being attached and
    modified, etc) must immediately cause the <a href="#final0">final
    flattened tree</a> to be updated.</p>

   <p>Changes to namespace prefix definitions in the shadow tree that affect
    <a href="#qname" title=QName>QNames</a> used in <code title=attr-attr><a
    href="#xblattr0">xbl:attr</a></code> attributes may have their effects
    applied immediately but this is not required.</p>

   <p>Because each bound element gets its own copy of the cloned template,
    changes to a bound element's shadow content only affect that bound
    element. Other bindings are unaffected.</p>

   <p>If an element is added to the DOM dynamically, its shadow scope is that
    of its parent element. Adding an element as a child of a bound element
    causes that element to be assigned to an appropriate <code><a
    href="#content0">content</a></code> element (if there is one &mdash; if
    there is not, the element does not appear anywhere in the <a
    href="#final0">final flattened tree</a>).</p>

   <h3 id=the-xblcontentelement><span class=secno>7.3. </span>The <code><a
    href="#xblcontentelement">XBLContentElement</a></code> Interface</h3>

   <p>The <code><a href="#xblcontentelement">XBLContentElement</a></code>
    interface is implemented by <code><a href="#content0">content</a></code>
    elements in the XBL namespace (regardless of whether they are <a
    href="#in-error">in error</a> or not).</p>

   <dl>
    <dt>IDL Definition

    <dd>
     <pre
      class=idl>interface <dfn id=xblcontentelement>XBLContentElement</dfn> : Element {
  readonly attribute <span>NodeList</span> <a href="#xblchildnodes">xblChildNodes</a>;
  void <a href="#setinsertionpoint">setInsertionPoint</a>(in Node child);
};</pre>

    <dt>Attributes

    <dd>
     <dl>
      <dt><dfn id=xblchildnodes><code>xblChildNodes</code></dfn> of type
       <code>NodeList</code>, readonly

      <dd>
       <p>The <code><a href="#xblchildnodes">xblChildNodes</a></code>
        attribute must return a <code>NodeList</code> containing a live list
        of all the nodes that are currently assigned to the <code><a
        href="#content0">content</a></code> element.</p>

       <p class=note>A node can be assigned to multiple <code><a
        href="#content0">content</a></code> elements simultaneously, in the
        case of bound elements inside shadow trees.</p>

       <p>Exception: if the <code><a href="#content0">content</a></code>
        element is not in a <a href="#shadow7">shadow tree</a>, then this
        attribute must return null.</p>
     </dl>

    <dt>Methods

    <dd>
     <dl>
      <dt><dfn id=setinsertionpoint><code>setInsertionPoint</code></dfn>

      <dd>
       <p>The <code><a href="#setinsertionpoint">setInsertionPoint</a></code>
        method perform the following steps.</p>

       <ol>
        <li>Let <var title="">e</var> be the bound element for which the user
         agent generated the shadow tree in which the given <code><a
         href="#content0">content</a></code> element finds itself. If there
         is no such bound element (e.g. the <code><a
         href="#content0">content</a></code> element has been removed from
         its shadow tree), then the method must raise an
         <code>INVALID_STATE_ERR</code> exception.

        <li>Let <var title="">child</var> be the node that was given as an
         argument to the method.

        <li>The user agent must then check that the parent of <var
         title="">child</var> is in fact <var title="">e</var>. If it is not,
         then the method must raise an <code>HIERARCHY_REQUEST_ERR</code>
         exception.

        <li>The user agent must then check that either the <code><a
         href="#content0">content</a></code> element has no <code
         title=attr-content-includes><a href="#includes">includes</a></code>
         attribute, or that <var title="">child</var> matches the selector
         given in the <code><a href="#content0">content</a></code> element's
         <code title=attr-content-includes><a
         href="#includes">includes</a></code> attribute. If the attribute is
         present but the element does not match the selector it specifies (or
         if the selector is not syntactically correct), then the method must
         raise an <code>TYPE_MISMATCH_ERR</code> exception.</li>
        <!-- XXX
           that one is stretching it -->

        <li>Finally, the user agent must assign <var title="">child</var> to
         the <code><a href="#content0">content</a></code> element, instead of
         whatever previous <code><a href="#content0">content</a></code>
         element it was assigned to, if any.
       </ol>

       <p>If a node is assigned, using the <code><a
        href="#setinsertionpoint">setInsertionPoint</a></code> method, to a
        <code><a href="#content0">content</a></code> element that is not
        locked, then the element will only remain there until such time as
        the user agent redistributes the bound element's explicit children.</p>

       <p>See <a href="#processing2">processing <code>content</code>
        elements</a>.</p>

       <p class=note>The order of nodes assigned to a <code><a
        href="#content0">content</a></code> element is always be the same as
        the relative order of those nodes in the original core DOM.</p>

       <dl>
        <dt>Parameters

        <dd>
         <dl>
          <dt><code class=parameter-name>child</code> of type
           <code>Node</code>

          <dd>The child of the bound element to assign to this <code><a
           href="#content0">content</a></code> element.
         </dl>

        <dt>No Return Value

        <dt>No Exceptions
       </dl>

       <div class=example>
        <p>The following example implements a tabbed interface as a binding.
         It creates a list of buttons to enable the user to access each of
         the sections that the tab box contains, and then uses <code><a
         href="#setinsertionpoint">setInsertionPoint()</a></code> to make the
         selected tab panel appear.</p>

        <pre>&lt;xbl xmlns="http://www.w3.org/ns/xbl">
 &lt;binding>
  &lt;template>
   &lt;div id="tabs"/>
   &lt;div class="panel">&lt;content id="current" locked="true"/>&lt;/div>
   &lt;div class="hidden">&lt;content id="not-current"/>&lt;/div>
  &lt;/template>
  &lt;implementation>
   ({
     set current(section) {
       if (this._current)
         this.shadowTree.getElementById('not-current').setInsertionPoint(this._current);
       this._current = section;
       if (this._current)
         this.shadowTree.getElementById('current').setInsertionPoint(this._current);
     },
     get current() {
       return this._current;
     },
     xblBindingAttached: function() {
       this.updateTabs();
       this.current = this.boundElement.getElementsByTagName('section')[0];
     },
     clearTabs: function() {
       with (this.shadowTree.getElementById('tabs'))
         while (hasChildNodes())
           removeChild(firstChild);
     },
     addTabFor: function(section) {
       var tab = document.createElementNS('http://www.w3.org/ns/xbl', 'div');
       tab.appendChild(document.createTextNode(section.getAttribute('title')););
       tab.addEventListener('click', function (_this) { return function (event) {
         var tabs = this.shadowTree.getElementByID('tabs').getElementsByTagName('div');
         for (var i = 0; i &amp;lt; tabs.length; ++i)
           tabs[i].setAttribute('class', '');
         _this.current = section;
         event.target.setAttribute('class', 'selected');
         event.preventDefault();
       } }(this), false);
       this.shadowTree.getElementById('tabs').appendChild(tab);
     },
     updateTabs: function() {
       this.clearTabs();
       var sections = this.boundElement.getElementsByTagName('section');
       for (var i = 0; i &amp;lt; sections.length; ++i)
         this.addTabFor(sections[i]);
     },
   })
  &lt;/implementation>
  &lt;resources>
   &lt;style>
    #tabs > div { /* style for tabs */ }
    #tabs > div.selected { /* style for selected tab */ }
    .panel { /* style for panel */ }
    .hidden { display: none; }
   &lt;/style>
  &lt;/resources>
 &lt;/binding>
&lt;/xbl></pre>

        <p>This binding could be applied to any element that has
         <code>section</code> elements as children, each <code>section</code>
         element having its title given in its <code>title</code> attribute.</p>

        <p>The binding implemented above doesn't dynamically update when the
         DOM is changed, a full implementation would probably want to listen
         to mutation events to catch attribute changes and insertions and
         removals of the panels.</p>
       </div>
     </dl>
   </dl>

   <h3 id=the-xbltemplateelement><span class=secno>7.4. </span>The <code><a
    href="#xbltemplateelement">XBLTemplateElement</a></code> Interface</h3>

   <p>The <code><a href="#xbltemplateelement">XBLTemplateElement</a></code>
    interface is implemented by <code><a
    href="#template0">template</a></code> elements that are in the XBL
    namespace (regardless of whether they are <a href="#in-error">in
    error</a> or not).</p>

   <dl>
    <dt>IDL Definition

    <dd>
     <pre class=idl>
interface <dfn id=xbltemplateelement>XBLTemplateElement</dfn> : Element {
  Element <a href="#getelementbyid">getElementById</a>(in DOMString elementId);
};
</pre>

    <dt>Attributes

    <dd>No Attributes

    <dt>Methods

    <dd>
     <dl>
      <dt><dfn class=method-name
       id=getelementbyid><code>getElementById</code></dfn>

      <dd>
       <p class=note>This method is modeled after the method of the same name
        defined by <a href="#refsDOM3CORE">[DOM3CORE]</a> on the
        <code>Document</code> interface.</p>

       <p>This method must return an <code>Element</code> that has an ID
        attribute with the given value, and that is a descendant of the
        <code><a href="#template0">template</a></code> element on which it is
        invoked. If more than one such element exists, which one is returned
        is undefined. If no such element exists, this returns
        <code>null</code>.</p>

       <p class=note>Attributes with the name "ID" or "id" are not of type ID
        unless so defined. For example, attributes with the name "id" on
        elements that are from the XHTML, MathML and XBL namespaces are
        defined to be of type ID by their respective specifications.</p>

       <dl>
        <dt>Parameters

        <dd>
         <dl>
          <dt><code class=parameter-name>elementId</code> of type
           <code>DOMString</code>

          <dd>The unique <code>id</code> value for an element.
         </dl>

        <dt>Returns

        <dd>
         <dl>
          <dt><code>Element</code>

          <dd> The matching element or null if there is none.
         </dl>

        <dt>No Exceptions
       </dl>
     </dl>
   </dl>

   <h3 id=the-eventxbl><span class=secno>7.5. </span>The <code><a
    href="#eventxbl">EventXBL</a></code> Interface</h3>

   <p>Objects that implement the <code>Event</code> interface must also
    implement the <code><a href="#eventxbl">EventXBL</a></code> interface. <a
    href="#refsDOM3EVENTS">[DOM3EVENTS]</a></p>

   <dl>
    <dt>IDL Definition

    <dd>
     <pre class=idl>interface <dfn id=eventxbl>EventXBL</dfn> {
  readonly attribute boolean <a href="#trusted0" title=event-trusted>trusted</a>;
};</pre>
   </dl>

   <p>The <dfn id=trusted0 title=event-trusted><code>trusted</code></dfn>
    attribute must return true if the user agent dispatched the event (e.g.
    in response to user action), and false otherwise (e.g. if an author
    script dispatched a synthetic event). Events fired by the user agent in
    response to untrusted events must themselves be untrusted.</p>
   <!--XXX
  <h2>Widget Bindings</h2>

  <p class="big-issue">(to be completed)</p>

  <p>A <dfn>widget binding</dfn> is a binding that extends either
  the <span class= "css">widget</span> base binding or any of the
  other <dfn>predefined base bindings</dfn> for widgets listed
  below.</p>

  <h3 id="base-bindings">Predefined Base Bindings</h3>

  <p>The following bindings have predefined meaning.</p>

  <dl>

   <dt>widget</dt>

   <dd>Implements the <code>value</code> property.</dd>

   <dt>native-checkbox</dt>

   <dd>...</dd>

   <dt>simple-checkbox</dt>

   <dd>...</dd>

   <dt>widget-scope</dt>

   <dd>Implements the <code>submit</code> and <code>reset</code>
   methods.</dd>

  </dl>
-->
   
   <h2 id=resources><span class=secno>8. </span>Resources</h2>

   <h3 id=loading><span class=secno>8.1. </span><dfn id=loading5>Loading
    External Resources</dfn></h3>

   <h4 id=binding5><span class=secno>8.1.1. </span>Binding Documents</h4>

   <p>Several features in XBL allow binding documents to be loaded.</p>

   <p>When the specification says that a binding document must be loaded
    <em>unless it has already been loaded</em>, then references to the same
    binding document (even if they are somewhat indirect, for example via
    HTTP redirects) must result in the same <code>Document</code> instance
    being reused, or shared.</p>

   <p>To determine if two binding documents are the same, their final base
    URIs (after all redirects) are compared.</p>

   <div class=example>
    <p>A <a href="#binding15">binding document</a> A contains a <code><a
     href="#binding16">binding</a></code> element that refers to a second
     binding document X. A new DOM <code>Document</code> instance is created
     to represent that instance and the relevant bindings are used.</p>

    <p>Now assume RX is a resource that redirects to resource X using the
     HTTP 301 redirection mechanism. A second <code><a
     href="#binding16">binding</a></code> element in the binding document A
     refers to resource RX. When that resource is being loaded, the redirect
     to X would be discovered, and therefore instead of creating a new
     <code>Document</code>, the existing one is reused.</p>
   </div>

   <p>Such sharing of binding documents must be limited to binding documents
    loaded by a document, its binding documents, its scripts, and its style
    sheets. Nested documents and images do not share binding documents with
    each other or with their container document.</p>

   <div class=example>
    <p>For example, if a document uses a binding document, and its style
     sheets use that binding document, the same binding document instance
     will be used for both cases. However, if that document contains an
     <code>iframe</code> whose document uses the same binding document, a new
     instance will be used: the binding document instance from the outer
     document is not reused.</p>
   </div>

   <p>Binding documents that are currently loading count as binding documents
    that are already loaded for the purposes of this reuse mechanism.</p>

   <h4 id=external><span class=secno>8.1.2. </span>External Resources</h4>

   <p>When the specification simply says that the external resource must be
    loaded, without giving any caveats regarding multiple accesses of the
    same resource, then each reference must instantiate a new unique copy of
    the document.</p>

   <p class=example>For example, two <code><a href="#style2">style</a></code>
    elements whose <code>src</code> attributes point to the same style sheet
    must create two different <code>Stylesheet</code> instances, such that
    mutating one does not affect the other.</p>

   <p>Several XBL attributes are defined to contain URIs. All URIs may be
    relative. For relative URIs, the rules given in <a
    href="#refsXMLBASE">[XMLBASE]</a> must be used to resolve the value to an
    absolute URI.</p>

   <h3 id=loading0><span class=secno>8.2. </span><dfn id=loading6>Loading and
    Running Scripts</dfn></h3>

   <p>Scripts in XBL may be found in <code><a
    href="#script2">script</a></code>, <code><a
    href="#implementation0">implementation</a></code>, and <code><a
    href="#handler0">handler</a></code> elements, or in resources that those
    elements point to.</p>

   <p>In the case of <code title=attr-script-src><a
    href="#src2">script</a></code> and <code title=attr-implementation-src><a
    href="#src">implementation</a></code> elements, if a <code
    title="">src</code> attribute is present then the contents of the element
    must be <span title="">ignored</span> (even if fetching the specified URI
    fails).</p>

   <p>The rules for parsing the scripts are the same for all three elements,
    but depend on the scripting language specified by the author.</p>

   <p>For non-XML languages, if the content is inline, UAs must concatenate
    all the textual contents of text and CDATA child nodes, and must <a
    href="#ignoring">ignore</a> any other, non-text nodes (such as elements
    and comments) along with all their children. All descendant elements must
    be processed, though, according to their semantics, before the XBL script
    block itself is executed.</p>

   <div class=example>
    <p>For example, in an XHTML-aware and ECMAScript-capable user agent, the
     following ridiculous code would cause the alerts to appear in the order
     One, Two, Three, and would set the <code title="">test</code> property
     in the binding document's global script scope to the string
     "undefinedABC":</p>

    <pre>&lt;xbl xmlns="http://www.w3.org/ns/xbl"&gt;
 &lt;!-- WARNING: THIS EXAMPLE IS NON-CONFORMING --&gt;
 &lt;script&gt;
  alert('Two');
  test += "B";
  &lt;script xmlns="http://www.w3.org/1999/xhtml"&gt;
   alert('One');
   test += "A";
  &lt;/script&gt;
  alert('Three');
  test += "C";
 &lt;/script&gt;
&lt;/xbl&gt;</pre>

    <p>Authors must not ever consider doing this. The above is invalid.</p>
   </div>

   <p>For XML-based scripting languages, handling of unknown elements and
    other unexpected nodes must be defined by that language.</p>

   <p>If the content is not inline, then when the element is evaluated, the
    resource specified by the <code title="">src</code> attribute must be
    fetched. For <code><a href="#script2">script</a></code> elements, while
    an external script is being fetched, any pending <a href="#binding19"
    title="Binding Attachment Model">binding attachments</a> from the same
    binding document must block, as must the evaluation of any further
    <code><a href="#script2">script</a></code> blocks. For <code><a
    href="#implementation0">implementation</a></code> elements, while the
    external script is being fetched, the <a href="#binding19" title="Binding
    Attachment Model">attachment</a> of that binding must block. If the
    file's Content-Type (or equivalent for non-HTTP protocols), if any, is
    not of the type <a href="#script-type"
    title=attr-xbl-script-type>specified</a> on the <code><a
    href="#xbl0">xbl</a></code> element, then the script must be ignored.
    Otherwise, the contents of that file must be used directly, as specified
    by the relevant language specification.</p>

   <h4 id=xforms><span class=secno>8.2.1. </span>XForms Actions</h4>

   <p><em>This section is only normative for implementations that support
    XForms.</em></p>

   <p>It is theoretically possible to use XForms Actions as the scripting
    language in XBL <a href="#refsXFORMS">[XFORMS]</a>. The MIME type that
    indicates this scripting language is tentatively defined to be <code
    class=mimetype>application/x-xforms-actions+xml</code>. XBL elements have
    the following semantics when used with XForms Actions:</p>

   <dl>
    <dt><code><a href="#script2">script</a></code> elements

    <dd>These are exactly equivalent to <code>xforms:action</code> elements
     that trigger immediately upon being added to the document.

    <dt><code><a href="#handler0">handler</a></code> elements

    <dd>These are exactly equivalent to <code>xforms:action</code> elements
     that trigger when the appropriate event on the bound element is
     detected.

    <dt><code><a href="#implementation0">implementation</a></code> elements

    <dd>Since XForms Actions cannot declare new interfaces, <code><a
     href="#implementation0">implementation</a></code> elements when the
     script language is set to <code
     class=mimetype>application/x-xforms-actions+xml</code> are <a
     href="#in-error">in error</a> and the UA must <a
     href="#ignoring">ignore</a> them, by treating <code><a
     href="#implementation0">implementation</a></code> elements like
     <code>xforms:action</code> elements that are not bound to any event.
   </dl>

   <h4 id=scripting><span class=secno>8.2.2. </span>Scripting Model</h4>

   <p>Each document that runs script (including bound documents and binding
    documents) has a <code>DocumentWindow</code> object, a
    <code>Window</code> object, a global script scope, and a security
    context. In ECMAScript, the global script scope and the
    <code>Window</code> object are one and the same.</p>

   <p class=note>This above paragraph is a vague description of the Web's
    de-facto scripting model. This specification depends on that model, but
    it hasn't yet been specified in detail. This specification will be
    updated when a suitable description is available.</p>

   <p>Script must always be executed in the context of the global script
    scope of the document specified by the script's element's
    <code>ownerDocument</code> DOM attribute. This implies that scripts from
    different bindings in the same binding document bound to different
    elements in the same bound document share the same scripting scope. If
    the bindings were defined in the document itself, then the scope is the
    same scope as for that document.</p>

   <p>A binding document must inherit the security context of the document to
    which it is bound, not the security context of the domain from which it
    was fetched<!--, unless the binding is marked
  as <em>secure</em>. Secure bindings must use separate security
  contexts appropriate for those given bindings-->.</p>

   <p>Scripting and security contexts are (or will be) described in the HTML5
    specification. <a href="#refsHTML5">[HTML5]</a></p>

   <p>In binding documents, the <code>location</code> and
    <code>history</code> properties of the <code>Window</code> object, and
    the <code>location</code> and <code>cookie</code> properties of the
    <code>DocumentWindow</code> object, must return null, and any methods
    that are defined in terms of the browsing context's session history must
    do nothing. <a href="#refsHTML5">[HTML5]</a></p>

   <p>User agents should implement a security mechanism such as the proposed
    <code>&lt;?access-control?&gt;</code> PI to prevent unauthorized
    cross-domain access. <a href="#refsACCESSCONTROL">[ACCESSCONTROL]</a></p>

   <h3 id=loading1><span class=secno>8.3. </span><dfn id=loading7>Loading
    Style Sheets</dfn></h3>

   <p>XBL <code><a href="#style2">style</a></code> elements describe the
    style sheets that apply to bindings.</p>

   <p>If a <code><a href="#style2">style</a></code> element's <code
    title=attr-style-src><a href="#src0">src</a></code> attribute is present,
    the contents of the element must be <a href="#ignoring"
    title=ignore>ignored</a> (even if fetching the specified URI failed).
    Otherwise, it is the element's contents that give the style sheet.</p>

   <p>Wherever the style is found, the rules for parsing it are the same, but
    depend on the language specified by the author.</p>

   <p>For non-XML styling languages, if the content is inline, UAs must
    concatenate all the textual contents of text and CDATA child nodes, and
    the UA must <a href="#ignoring">ignore</a> any other, non-text nodes
    (such as elements and comments) along with all their children. All
    descendant elements must be processed, though, according to their
    semantics, before the XBL style block itself is parsed. A style element
    labeled as containing a style sheet in a non-XML language yet containing
    element nodes is <a href="#in-error">in error</a>.</p>

   <div class=example>
    <p>For example, in an XHTML-aware and ECMAScript-capable user agent, the
     rather dubious code below would result in a binding that enclosed the
     bound element's children in a green box, not a red one:</p>

    <pre>&lt;xbl xmlns="http://www.w3.org/ns/xbl"&gt;
 &lt;binding&gt;
  &lt;template&gt;
   &lt;div&gt;
    &lt;content/&gt;
   &lt;/div&gt;
  &lt;/template&gt;
  &lt;resources&gt;
   &lt;style id="test"&gt;
    div { background: red; }
    &lt;script xmlns="http://www.w3.org/1999/xhtml"&gt;
     document.getElementById('test').firstChild.data = "div { background: green; }";
    &lt;/script&gt;
    &lt;p xmlns="http://www.w3.org/1999/xhtml"&gt;
     div { border: red solid; }
     This will either be ignored by the XBL user agent, or will cause
     it to abort all processing altogether, as this text node is not a
     child of the style element.
    &lt;/p&gt;
   &lt;/style&gt;
  &lt;/resources&gt;
 &lt;/binding&gt;
&lt;/xbl&gt;</pre>
   </div>

   <p>For XML-based styling languages, handling of unknown elements and other
    unexpected nodes must be defined by that language.</p>

   <p>If the content was in another resource, and the Content-Type (or
    equivalent for non-HTTP protocols), if any, was of the type specified on
    the <code><a href="#xbl0">xbl</a></code> element (or implied by its
    absence), then the contents of that file must be used directly, as
    specified by the relevant language specification. Otherwise, the <code><a
    href="#style2">style</a></code> element doesn't provide any styling. The
    <code title=attr-style-src><a href="#src0">src</a></code> attribute must
    only be examined once all of the element's children have been processed
    (if any).</p>

   <h3 id=interpretation><span class=secno>8.4. </span><dfn
    id=interpretation1>Interpretation of URIs to XBL bindings</dfn></h3>

   <p>XBL attachment mechanisms use a URI to specify which binding to attach
    to the designated element.</p>

   <div class=example>
    <p>For example:</p>

    <pre>my|foo {
   binding: url("<strong>http://www.example.org/bindings.xml#fooBinding</strong>");
}</pre>
   </div>

   <p>This section defines how these URIs, which are used in the argument to
    the <code><a href="#addbinding">addBinding()</a></code> method, and in
    the value of the '<code title="binding property"><a
    href="#binding18">binding</a></code>' property, are to be interpreted.</p>

   <p>The URI specifies a particular <a href="#binding15">binding
    document</a> (an <a href="#xbl-document">XBL document</a> or <a
    href="#non-xbl">non-XBL document</a> containing one or more XBL
    subtrees). The user agent must fetch this resource (unless it has <a
    href="#loading5" title="loading external resources">already been
    loaded</a>).</p>

   <p>If the URI contains a fragment identifier, then it must be processed as
    described in the relevant MIME type definition. The element targeted by
    the fragment identifier must be a <code><a
    href="#binding16">binding</a></code> element within an XBL subtree in the
    specified document, and that element must be a direct child of an
    <code><a href="#xbl0">xbl</a></code> element that does not itself have an
    <code><a href="#xbl0">xbl</a></code> element as an ancestor; if these
    conditions are not met then the URI is <a href="#in-error">in error</a>.</p>

   <p class=example>For example, if the binding document is sent as
    <code>application/xhtml+xml</code>, and the fragment identifier matches a
    <code><a href="#binding16">binding</a></code> element's <code
    title=attr-id><a href="#id13">id</a></code> attribute, then that is the
    binding that is attached.</p>

   <p>If there is no fragment identifier and the URI points to an XBL
    document (not a <a href="#non-xbl">non-XBL document</a>) then the first
    <code><a href="#binding16">binding</a></code> element in the binding
    document that is a child of the root <code><a href="#xbl0">xbl</a></code>
    element is selected. Otherwise, the URI does not point to a <a
    href="#correct">correct</a> binding and is <a href="#in-error">in
    error</a>.</p>

   <p>When an attachment mechanism uses a URI that is <a href="#in-error">in
    error</a> (as per the last two paragraphs), then the user agent must act
    as if the attachment mechanism had not specified that binding.</p>

   <p>Otherwise, the specified binding is attached to the element, as
    described for the relevant attachment mechanism.</p>

   <h2 id=summaries><span class=secno>9. </span>Summaries of Elements,
    Attributes, and Events</h2>

   <h3 id=elements><span class=secno>9.1. </span>Elements and Attributes</h3>

   <p><em>This section is non-normative.</em></p>

   <table>
    <thead>
     <tr>
      <th>Element

      <th>Attributes

      <th>Content Model

    <tbody>
     <tr>
      <td><code><a href="#xbl0">xbl</a></code>

      <td>
       <ul>
        <li><code title=attr-id><a href="#id13">id</a></code>

        <li><code title=attr-xbl-script-type><a
         href="#script-type">script-type</a></code>

        <li><code title=attr-xbl-style-type><a
         href="#style-type">style-type</a></code>
       </ul>

      <td>
       <ul>
        <li><code><a href="#binding16">binding</a></code>

        <li><code><a href="#script2">script</a></code>

        <li>Non-XBL elements
       </ul>

     <tr>
      <td><code><a href="#binding16">binding</a></code>

      <td>
       <ul>
        <li><code title=attr-id><a href="#id13">id</a></code>

        <li><code title=attr-binding-extends><a
         href="#extends">extends</a></code>

        <li><code title=attr-binding-element><a
         href="#element">element</a></code>
       </ul>

      <td>
       <ul>
        <li><code><a href="#implementation0">implementation</a></code>

        <li><code><a href="#template0">template</a></code>

        <li><code><a href="#handlers0">handlers</a></code>

        <li><code><a href="#resources1">resources</a></code>

        <li>Non-XBL elements
       </ul>

     <tr>
      <td><code><a href="#implementation0">implementation</a></code>

      <td>
       <ul>
        <li><code title=attr-id><a href="#id13">id</a></code>

        <li><code title=attr-implementation-src><a href="#src">src</a></code>
         
       </ul>

      <td>
       <ul>
        <li>Script
       </ul>

     <tr>
      <td><code><a href="#template0">template</a></code>

      <td>
       <ul>
        <li><code title=attr-id><a href="#id13">id</a></code>

        <li><code title=attr-template-apply-author-sheets><a
         href="#apply-author-sheets">apply-author-sheets</a></code>

        <li><code title=attr-template-allow-selectors-through><a
         href="#allow-selectors-through">allow-selectors-through</a></code>
       </ul>

      <td>
       <ul>
        <li><code><a href="#div0">div</a></code>

        <li><code><a href="#content0">content</a></code>

        <li><code><a href="#inherited0">inherited</a></code>

        <li>Non-XBL elements, optionally with <code title=attr-attr><a
         href="#xblattr0">xbl:attr</a></code> and <code title=attr-pseudo><a
         href="#xblpseudo0">xbl:pseudo</a></code> attributes
       </ul>

     <tr>
      <td><code><a href="#content0">content</a></code>

      <td>
       <ul>
        <li><code title=attr-id><a href="#id13">id</a></code>

        <li><code title=attr-content-includes><a
         href="#includes">includes</a></code>

        <li><code title=attr-content-apply-binding-sheets><a
         href="#apply-binding-sheets">apply-author-sheets</a></code>

        <li><code title=attr-content-locked><a
         href="#locked">locked</a></code>
       </ul>

      <td>
       <ul>
        <li><code><a href="#div0">div</a></code>

        <li><code><a href="#inherited0">inherited</a></code>

        <li>Non-XBL elements, optionally with <code title=attr-attr><a
         href="#xblattr0">xbl:attr</a></code> and <code title=attr-pseudo><a
         href="#xblpseudo0">xbl:pseudo</a></code> attributes
       </ul>

     <tr>
      <td><code><a href="#inherited0">inherited</a></code>

      <td>
       <ul>
        <li><code title=attr-id><a href="#id13">id</a></code>
       </ul>

      <td>
       <ul>
        <li><code><a href="#div0">div</a></code>

        <li><code><a href="#content0">content</a></code>

        <li>Non-XBL elements, optionally with <code title=attr-attr><a
         href="#xblattr0">xbl:attr</a></code> and <code title=attr-pseudo><a
         href="#xblpseudo0">xbl:pseudo</a></code> attributes
       </ul>

     <tr>
      <td><code><a href="#div0">div</a></code>

      <td>
       <ul>
        <li><code title=attr-id><a href="#id13">id</a></code>

        <li><code title=attr-div-class><a href="#class">class</a></code>

        <li><code title=attr-div-state><a href="#state">state</a></code>

        <li><code title=attr-div-title><a href="#title">title</a></code>

        <li><code title=attr-attr><a href="#xblattr0">xbl:attr</a></code>

        <li><code title=attr-pseudo><a
         href="#xblpseudo0">xbl:pseudo</a></code>
       </ul>

      <td>
       <ul>
        <li><code><a href="#div0">div</a></code>

        <li><code><a href="#content0">content</a></code>

        <li><code><a href="#inherited0">inherited</a></code>

        <li>Non-XBL elements, optionally with <code title=attr-attr><a
         href="#xblattr0">xbl:attr</a></code> and <code title=attr-pseudo><a
         href="#xblpseudo0">xbl:pseudo</a></code> attributes
       </ul>

     <tr>
      <td><code><a href="#handlers0">handlers</a></code>

      <td>
       <ul>
        <li><code title=attr-id><a href="#id13">id</a></code>
       </ul>

      <td>
       <ul>
        <li><code><a href="#handler0">handler</a></code>
       </ul>

     <tr>
      <td><code><a href="#handler0">handler</a></code>

      <td>
       <ul>
        <li><code title=attr-id><a href="#id13">id</a></code>

        <li><code title=attr-handler-event><a href="#event9">event</a></code>
         

        <li><code title=attr-handler-phase><a href="#phase">phase</a></code>

        <li><code title=attr-handler-trusted><a
         href="#trusted">trusted</a></code>

        <li><code title=attr-handler-propagate><a
         href="#propagate">propagate</a></code>

        <li><code title=attr-handler-default-action><a
         href="#default-action">default-action</a></code>

        <li><code title=attr-handler-button><a
         href="#button">button</a></code>

        <li><code title=attr-handler-click-count><a
         href="#click-count">click-count</a></code>

        <li><code title=attr-handler-modifiers><a
         href="#modifiers1">modifiers</a></code>

        <li><code title=attr-handler-key><a href="#key">key</a></code>

        <li><code title=attr-handler-key-location><a
         href="#key-location">key-location</a></code>

        <li><code title=attr-handler-text><a href="#text">text</a></code>

        <li><code title=attr-handler-prev-value><a
         href="#prev-value">prev-value</a></code>

        <li><code title=attr-handler-new-value><a
         href="#new-value">new-value</a></code>

        <li><code title=attr-handler-attr-name><a
         href="#attr-name">attr-name</a></code>

        <li><code title=attr-handler-attr-change><a
         href="#attr-change">attr-change</a></code>
       </ul>

      <td>
       <ul>
        <li>Script
       </ul>

     <tr>
      <td><code><a href="#resources1">resources</a></code>

      <td>
       <ul>
        <li><code title=attr-id><a href="#id13">id</a></code>
       </ul>

      <td>
       <ul>
        <li><code><a href="#style2">style</a></code>

        <li><code><a href="#prefetch0">prefetch</a></code>
       </ul>

     <tr>
      <td><code><a href="#style2">style</a></code>

      <td>
       <ul>
        <li><code title=attr-id><a href="#id13">id</a></code>

        <li><code title=attr-style-media><a href="#media">media</a></code>

        <li><code title=attr-style-src><a href="#src0">src</a></code>
       </ul>

      <td>
       <ul>
        <li>Style
       </ul>

     <tr>
      <td><code><a href="#prefetch0">prefetch</a></code>

      <td>
       <ul>
        <li><code title=attr-id><a href="#id13">id</a></code>

        <li><code title=attr-prefetch-src><a href="#src1">src</a></code>
       </ul>

      <td>

     <tr>
      <td><code><a href="#script2">script</a></code>

      <td>
       <ul>
        <li><code title=attr-id><a href="#id13">id</a></code>

        <li><code title=attr-script-src><a href="#src2">src</a></code>
       </ul>

      <td>
       <ul>
        <li>Script
       </ul>
   </table>

   <h3 id=events><span class=secno>9.2. </span>Events</h3>

   <p><em>This section is non-normative.</em></p>

   <table>
    <thead>
     <tr>
      <th>Event Name

      <th>Interface

      <th>Target when fired by UA

      <th>Bubbles?

      <th>Cancelable?

      <th>Default Action

    <tbody>
     <tr>
      <td><code title=xbl-bound><a href="#xbl-bound">xbl-bound</a></code>

      <td><code>Event</code>

      <td>Bound element

      <td>&#x2713; Bubbles

      <td>&mdash;

      <td>None

     <tr>
      <td><code title=xbl-bindings-are-ready><a
       href="#xbl-bindings-are-ready">xbl-bindings-are-ready</a></code>

      <td><code>Event</code>

      <td>Bound document's root element

      <td>&#x2713; Bubbles

      <td>&mdash;

      <td>None
   </table>

   <h3 id=implementations><span class=secno>9.3. </span>Implementations</h3>

   <p><em>This section is non-normative.</em></p>

   <p>The properties of the <a href="#internal">internal object</a> are:</p>

   <ul class=brief>
    <li><code><a href="#external1">external</a></code>

    <li><code><a href="#boundelement">boundElement</a></code>

    <li><code><a href="#shadowtree">shadowTree</a></code>

    <li><code><a href="#basebinding">baseBinding</a></code>
   </ul>

   <p>The methods that binding implementations can support are:</p>

   <ul class=brief>
    <li><code><a href="#xblbindingattached">xblBindingAttached()</a></code>

    <li><code><a href="#xblentereddocument">xblEnteredDocument()</a></code>

    <li><code><a href="#xblleftdocument">xblLeftDocument()</a></code>
   </ul>

   <h2 class=no-num id=acknowledgments>Acknowledgments</h2>

   <p>David Hyatt developed XBL 1.0 and provided guidance for the development
    of XBL 2.0.</p>

   <p>The editor would like to thank Alex Danilo, Alex Vincent, Anne van
    Kesteren, Axel Hecht, Antoine Quint, Benjamin Smedberg, Bjoern Hoehrmann,
    Boris Zbarsky, Brendan Eich, Cameron McCormack, Chris Lilley, Christophe
    Jolif, Cyril Concolato, Darryl Fuller, David H&aring;s&auml;ther, Dean
    Jackson, Jon Ferraiolo, Jonas Sicking, Karl Dubost, L. David Baron,
    Lachlan Hunt, Liam Quin, Marcos Caceres, Mark Baker, Micah Dubinko, Mihai
    Sucan, Mikko Pohja, Mohamed Zergaoui, Norman Walsh, Peter Sorotokin,
    Robin Berjon, Ruud Steltenpool, Sean Hogan, Simon Pieters, Steve K.
    Speicher, Steve Zilles, Tim Rowley, and Tom Pike for their contributions
    to this specification.</p>

   <h2 class=no-num id=references>References</h2>

   <p>All references are normative unless prefixed by the mark
    "(Informative)".</p>

   <dl>
    <dt id=refsACCESSCONTROL>[ACCESSCONTROL]

    <dd>(Informative) <cite><a
     href="http://www.w3.org/TR/2005/NOTE-access-control-20050613/">Authorizing
     Read Access to XML Content Using the &lt;?access-control?&gt; Processing
     Instruction 1.0</a></cite>, M. Oshry, B. Porter, R. Auburn. W3C, June
     2005. The latest version of this specification is available at <a
     href="http://www.w3.org/TR/access-control/">http://www.w3.org/TR/access-control/</a>

    <dt id=refsCSS21>[CSS21]

    <dd><cite><a href="http://www.w3.org/TR/2004/CR-CSS21-20040225/">CSS 2.1
     Specification</a></cite>, B. Bos, T. &Ccedil;elik, I. Hickson, H. Lie.
     W3C, September 2003. The latest version of the CSS 2.1 specification is
     available at <a
     href="http://www.w3.org/TR/CSS21/">http://www.w3.org/TR/CSS21/</a>

    <dt id=refsCSS3UI>[CSS3UI]

    <dd><cite><a href="http://www.w3.org/TR/2004/CR-css3-ui-20040511/">CSS3
     Basic User Interface Module</a></cite>, T. &Ccedil;elik. W3C, May 2004.
     The latest version of the CSS3 UI module is available at <a
     href="http://www.w3.org/TR/css3-ui/">http://www.w3.org/TR/css3-ui/</a>

    <dt id=refsDOM2VIEWS>[DOM2VIEWS]

    <dd><cite><a
     href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Views-20001113/">Document
     Object Model (DOM) Level 2 Views Specification</a></cite>, A. Le Hors,
     L. Cable. W3C, November 2000. The latest version of the DOM Level 2
     Views specification is available at <a
     href="http://www.w3.org/TR/DOM-Level-2-Views/">http://www.w3.org/TR/DOM-Level-2-Views/</a>

    <dt id=refsDOM3CORE>[DOM3CORE]

    <dd><cite><a
     href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/">Document
     Object Model (DOM) Level 3 Core Specification</a></cite>, A. Le Hors, P.
     Le H&eacute;garet, L. Wood, G. Nicol, J. Robie, M. Champion, S. Byrne.
     W3C, November 2003. The latest version of the DOM Level 3 Core
     specification is available at <a
     href="http://www.w3.org/TR/DOM-Level-3-Core/">http://www.w3.org/TR/DOM-Level-3-Core/</a>

    <dt id=refsDOM3EVENTS>[DOM3EVENTS]

    <dd><cite><a
     href="http://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/">Document
     Object Model (DOM) Level 3 Events Specification</a></cite>, P. Le
     H&eacute;garet, T. Pixley. W3C, November 2003. (Note: Despite its
     non-normative status on the W3C Recommendation track, this specification
     should be considered normative for the purposes of conformance.) The
     latest version of the DOM Level 3 Events specification is available at
     <a
     href="http://www.w3.org/TR/DOM-Level-3-Events/">http://www.w3.org/TR/DOM-Level-3-Events/</a>

    <dt id=refsECMA262>[ECMA262]

    <dd><cite><a
     href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript
     Language Specification</a></cite>, Third Edition. ECMA, December 1999.
     This version of the ECMAScript Language is available at
     http://www.ecma-international.org/publications/standards/Ecma-262.htm

    <dd>(Informative) <cite><a
     href="http://developer.mozilla.org/es4/spec/spec.html">ECMAScript
     Language Specification</a></cite>, Fourth Edition (Incomplete Draft
     Proposal). ECMA, January 2006. This version of the ECMAScript Language
     is available at http://developer.mozilla.org/es4/spec/spec.html

    <dt id=refsHTC>[HTC]

    <dd>(Informative) <cite><a
     href="http://www.w3.org/TR/1998/NOTE-HTMLComponents-19981023">HTML
     Components</a></cite>, C. Wilson. Microsoft, September 1998. The HTML
     Components submission is available at
     http://www.w3.org/TR/1998/NOTE-HTMLComponents-19981023

    <dt id=refsHTML5>[HTML5]

    <dd>(Informative) <cite><a
     href="http://whatwg.org/specs/web-apps/current-work/">Web Applications
     1.0</a></cite>, I. Hickson. WHATWG, work in progress. The latest version
     of the HTML5 proposal is at
     http://whatwg.org/specs/web-apps/current-work/

    <dt id=refsMQ>[MQ]

    <dd><cite><a
     href="http://www.w3.org/TR/2002/CR-css3-mediaqueries-20020708/">Media
     Queries</a></cite>, H. Lie, T. &Ccedil;elik, D Glazman. W3C, July 2002.
     The latest version of Media Queries is available at <a
     href="http://www.w3.org/TR/css3-mediaqueries/">http://www.w3.org/TR/css3-mediaqueries/</a>

    <dt id=refsRFC2045>[RFC2045]

    <dd><cite><a href="http://www.ietf.org/rfc/rfc2045">Multipurpose Internet
     Mail Extensions (MIME) Part One: Format of Internet Message
     Bodies</a></cite>, N. Freed, N. Borenstein. IETF, November 1996. RFC
     2045 is available at http://www.ietf.org/rfc/rfc2045

    <dt id=refsRFC2119>[RFC2119]

    <dd><cite><a href="http://www.ietf.org/rfc/rfc2119.txt">Key words for use
     in RFCs to Indicate Requirement Levels</a></cite>, S. Bradner. IETF,
     March 1997. RFC 2119 is available at http://www.ietf.org/rfc/rfc2119.txt

    <dt id=refsRFC3986>[RFC3986]

    <dd><cite><a href="http://www.ietf.org/rfc/rfc3986">Uniform Resource
     Identifier (URI): Generic Syntax</a></cite>, T. Berners-Lee, R.
     Fielding, L. Masinter. IETF, January 2005. RFC 3986 is available at
     http://www.ietf.org/rfc/rfc3986

    <dt id=refsRFC3987>[RFC3987]

    <dd><cite><a href="http://www.ietf.org/rfc/rfc3987">Internationalized
     Resource Identifiers (IRIs)</a></cite>, M. D&uuml;rst, M. Suignard.
     IETF, January 2005. RFC 3987 is available at
     http://www.ietf.org/rfc/rfc3987

    <dt id=refsSELECTORS>[SELECTORS]

    <dd><cite><a
     href="http://www.w3.org/TR/2001/CR-css3-selectors-20011113/">Selectors</a></cite>,
     D. Glazman, T. &Ccedil;elik, I. Hickson. W3C, November 2001. The latest
     version of the Selectors specification is available at <a
     href="http://www.w3.org/TR/css3-selectors/">http://www.w3.org/TR/css3-selectors/</a>

    <dt id=refsUNICODE>[UNICODE]

    <dd><cite><a href="http://www.unicode.org/versions/Unicode5.0.0/">The
     Unicode Standard, Version 5.0.0</a></cite>, The Unicode Consortium.
     Boston, MA, Addison-Wesley, November 2006. ISBN
     0-321-48091-0<!--, as amended by <a href="http://www.unicode.org/versions/Unicode5.0.1/">Unicode 5.0.1</a> and <a href="http://www.unicode.org/versions/Unicode5.1.0/">Unicode 5.1.0</a>-->.
     The latest version of the Unicode specification is available at <a
     href="http://www.unicode.org/versions/">http://www.unicode.org/versions/</a>

    <dt id=refsXBL10>[XBL10]

    <dd>(Informative) <cite><a
     href="http://www.w3.org/TR/2001/NOTE-xbl-20010223/">XML Binding
     Language</a></cite>, D. Hyatt. Mozilla, February 2001. The XBL
     submission is available at http://www.w3.org/TR/2001/NOTE-xbl-20010223/

    <dd>(Informative) <cite><a
     href="http://www.mozilla.org/projects/xbl/xbl.html">XML Binding
     Language</a></cite>, D. Hyatt. Mozilla, November 2000 (and subsequently
     edited by other contributors). The XBL 1.0 specification is available at
     http://www.mozilla.org/projects/xbl/xbl.html

    <dt id=refsXFORMS>[XFORMS]

    <dd>(Informative) <cite><a
     href="http://www.w3.org/TR/2003/REC-xforms-20031014/">XForms
     1.0</a></cite>, M. Dubinko, L. Klotz, R. Merrick, T. Raman. W3C, October
     2003. The latest version of the XForms specification is available at <a
     href="http://www.w3.org/TR/xforms/">http://www.w3.org/TR/xforms/</a>

    <dt id=refsXML>[XML]

    <dd><cite><a
     href="http://www.w3.org/TR/2006/REC-xml-20060816/">Extensible Markup
     Language (XML) 1.0 (Fourth Edition)</a></cite>, T. Bray, J. Paoli, C.
     Sperberg-McQueen, E. Maler, F. Yergeau. W3C, September 2006. The latest
     version of the XML specification is available at <a
     href="http://www.w3.org/TR/REC-xml/">http://www.w3.org/TR/REC-xml/</a>

    <dt id=refsXMLBASE>[XMLBASE]

    <dd><cite><a href="http://www.w3.org/TR/2001/REC-xmlbase-20010627/">XML
     Base</a></cite>, J. Marsh. W3C, June 2001. The latest version of the XML
     Base specification is available at <a
     href="http://www.w3.org/TR/xmlbase/">http://www.w3.org/TR/xmlbase/</a>

    <dt id=refsXMLEVENTS>[XMLEVENTS]

    <dd><cite><a
     href="http://www.w3.org/TR/2003/REC-xml-events-20031014/">XML
     Events</a></cite>, S. McCarron, S. Pemberton, T. Raman. W3C, October
     2003. The latest version of the XML Events specification is available at
     <a
     href="http://www.w3.org/TR/xml-events/">http://www.w3.org/TR/xml-events/</a>

    <dt id=refsXMLNS>[XMLNS]

    <dd><cite><a
     href="http://www.w3.org/TR/2006/REC-xml-names-20060816/">Namespaces in
     XML (Second Edition)</a></cite>, T. Bray, D. Hollander, A. Layman, R.
     Tobin. W3C, August 2006. The latest version of the Namespaces in XML
     specification is available at <a
     href="http://www.w3.org/TR/REC-xml-names/">http://www.w3.org/TR/REC-xml-names/</a>

    <dt id=refsXMLSSPI>[XMLSSPI]

    <dd><cite><a
     href="http://www.w3.org/1999/06/REC-xml-stylesheet-19990629/">Associating
     Style Sheets with XML documents</a></cite>, J. Clark. W3C, June 1999.
     The latest version of the Associating Style Sheets with XML documents
     specification is available at <a
     href="http://www.w3.org/TR/xml-stylesheet/">http://www.w3.org/TR/xml-stylesheet/</a>
   </dl>
  </div>
</html>
<!--XXX WANTED:

some way of initializing internal fields as pointing to the DOM Nodes
of anon content, so that the constructor doesn't have to walk content,
e.g. to set mInputElement in a <textbox> binding containing an <input
type="text">.

maximum number of nodes per <content>, with overflow to other
<content>s


Nickolay Ponomarev:
  A way to say that the element supports onfoo="" handlers.
  A way to easily fire custom events.

-->