spec/custom/custom-elements-whole-world.svg

<?xml version="1.0" standalone="yes"?>
<svg version="1.1" viewBox="0.0 0.0 960.0 720.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
    text {
        font-family: sans-serif;
        font-size: 12px;
        color: #999;
    }
</style>
    <g>
        <path stroke="#000000" d="m309.3622 48.454067l158.74014 0l0 52.40945l-158.74014 0z"></path>
        <g transform="translate(309 48)">
            <a xlink:href="index.html#dfn-element-registration-algorithm" target="_parent">
            <text fill="black" dx="10" dy="20">
                <tspan>element registration</tspan>
                <tspan x="10" dy="1.4em">algorithm</tspan>
            </text>
            </a>
        </g>

        <path stroke="#000000" d="m515.1942 48.454067l158.74017 0l0 52.40945l-158.74017 0z"></path>
        <g transform="translate(515 48)">
            <a xlink:href="index.html#dfn-definition-construction-algorithm" target="_parent">
            <text fill="black" dx="10" dy="20">
                <tspan>definition construction</tspan>
                <tspan x="10" dy="1.4em">algorithm</tspan>
            </text>
            </a>
        </g>

        <path stroke="#000000" d="m515.1942 121.64829l158.74017 0l0 52.409447l-158.74017 0z"></path>
        <g transform="translate(515 121)">
            <a xlink:href="index.html#dfn-element-upgrade-algorithm" target="_parent">
            <text fill="black" dx="10" dy="20">
                <tspan>element upgrade</tspan>
                <tspan x="10" dy="1.4em">algorithm</tspan>
            </text>
            </a>
        </g>

        <path stroke="#000000" d="m309.3622 264.14172l158.74014 0l0 66.64569l-158.74014 0z"></path>
        <g transform="translate(309 264)">
            <a xlink:href="index.html#dfn-custom-element-constructor-generation" target="_parent">
            <text fill="black" dx="10" dy="20">
                <tspan>custom element</tspan>
                <tspan x="10" dy="1.4em">constructor generation</tspan>
                <tspan x="10" dy="1.4em">algorithm</tspan>
            </text>
            </a>
        </g>

        <path stroke="#000000" d="m15.590551 110.49869l191.87402 0l0 52.409454l-191.87402 0z"></path>
        <g transform="translate(15 110)">
            <a xlink:href="index.html#extensions-to-document-interface-to-instantiate" target="_parent">
            <text fill="black" dx="10" dy="20">
                <tspan>document.createElement</tspan>
                <tspan x="10" dy="1.4em">document.createElementNS</tspan>
            </text>
            </a>
        </g>

        <path stroke="#000000" d="m48.727036 217.7769l158.74016 0l0 30.456696l-158.74016 0z"></path>
        <g transform="translate(48 217)">
            <a xlink:href="index.html#dfn-created-callback" target="_parent">
            <text fill="black" dx="10" dy="20">
                <tspan>element is created</tspan>
            </text>
            </a>
        </g>

        <path stroke="#000000" d="m768.6903 618.05774l158.74011 0l0 52.409424l-158.74011 0z"></path>
        <g transform="translate(768 618)">
            <a xlink:href="index.html#dfn-set-prototype" target="_parent">
            <text fill="black" dx="10" dy="20">
                <tspan>set custom element</tspan>
                <tspan x="10" dy="1.4em">prototype</tspan>
            </text>
            </a>
        </g>

        <path stroke="#000000" d="m48.721786 271.84253l158.74016 0l0 30.456696l-158.74016 0z"></path>
        <g transform="translate(48 271)">
            <a xlink:href="index.html#dfn-attached-callback" target="_parent">
            <text fill="black" dx="10" dy="20">
                <tspan>element Attached</tspan>
            </text>
            </a>
        </g>

        <path stroke="#000000" d="m48.721786 327.47507l158.74016 0l0 30.456696l-158.74016 0z"></path>
        <g transform="translate(48 327)">
            <a xlink:href="index.html#dfn-detached-callback" target="_parent">
            <text fill="black" dx="10" dy="20">
                <tspan>element Detached</tspan>
            </text>
            </a>
        </g>

        <path stroke="#000000" d="m48.727036 388.08136l158.74016 0l0 30.456696l-158.74016 0z"></path>
        <g transform="translate(48 388)">
            <a xlink:href="index.html#dfn-attribute-changed-callback" target="_parent">
            <text fill="black" dx="10" dy="20">
                <tspan>attribute changed</tspan>
            </text>
            </a>
        </g>

        <path stroke="#000000" d="m768.6903 375.9172l158.74011 0l0 52.409454l-158.74011 0z"></path>
        <g transform="translate(768 375)">
            <a xlink:href="index.html#dfn-enqueue-lifecycle-callback" target="_parent">
            <text fill="black" dx="10" dy="20">
                <tspan>enqueue a lifecycle</tspan>
                <tspan x="10" dy="1.4em">callback</tspan>
            </text>
            </a>
        </g>

        <path stroke="#000000" d="m15.590551 448.68765l191.87402 0l0 52.409454l-191.87402 0z"></path>
        <g transform="translate(15 448)">
            <a xlink:href="index.html#enqueuing-and-invoking-callbacks" target="_parent">
            <text fill="black" dx="10" dy="20">
                <tspan>an element is popped from</tspan>
                <tspan x="10" dy="1.4em">the stack of open elements</tspan>
            </text>
            </a>
        </g>

        <path stroke="#000000" d="m515.1942 282.2362l158.74017 0l0 30.456696l-158.74017 0z"></path>
        <g transform="translate(515 282)">
            <a xlink:href="index.html#dfn-custom-element-constructor-generation" target="_parent">
            <text fill="black" dx="10" dy="20">
                <tspan>generated constructor</tspan>
            </text>
            </a>
        </g>

        <path stroke="#000000" d="m48.737534 591.853l158.74016 0l0 52.409424l-158.74016 0z"></path>
        <g transform="translate(48 591)">
            <a xlink:href="index.html#enqueuing-and-invoking-callbacks" target="_parent">
            <text fill="black" dx="10" dy="20">
                <tspan>transition from user</tspan>
                <tspan x="10" dy="1.4em">agent code to script</tspan>
            </text>
            </a>
        </g>

        <path stroke="#000000" d="m48.737534 531.2467l158.74016 0l0 30.456726l-158.74016 0z"></path>
        <g transform="translate(48 531)">
            <a xlink:href="index.html#enqueuing-and-invoking-callbacks" target="_parent">
            <text fill="black" dx="10" dy="20">
                <tspan>microtask checkpoint</tspan>
            </text>
            </a>
        </g>

        <path stroke="#000000" d="m768.6903 520.2703l158.74011 0l0 52.409485l-158.74011 0z"></path>
        <g transform="translate(768 520)">
            <a xlink:href="index.html#dfn-invoke-callbacks-in-element-queue" target="_parent">
            <text fill="black" dx="10" dy="20">
                <tspan>invoke lifecycle</tspan>
                <tspan x="10" dy="1.4em">callbacks</tspan>
            </text>
            </a>
        </g>

        <path stroke="#000000" d="m309.3622 520.2703l158.74014 0l0 52.409485l-158.74014 0z"></path>
        <g transform="translate(309 520)">
            <a xlink:href="index.html#dfn-process-base-element-queue" target="_parent">
            <text fill="black" dx="10" dy="20">
                <tspan>process base element</tspan>
                <tspan x="10" dy="1.4em">queue</tspan>
            </text>
            </a>
        </g>

        <path stroke="#000000" d="m768.6903 48.455257l158.74011 0l0 52.40945l-158.74011 0z"></path>
        <g transform="translate(768 48)">
            <a xlink:href="index.html#dfn-transfer-callback" target="_parent">
            <text fill="black" dx="10" dy="20">
                <tspan>transfer a lifecycle</tspan>
                <tspan x="10" dy="1.4em">callback</tspan>
            </text>
            </a>
        </g>

        <path stroke="#000000" d="m28.721786 59.299213l178.74016 0l0 30.456692l-178.74016 0z"></path>
        <g transform="translate(28 59)">
            <a xlink:href="index.html#dfn-document-registerElement" target="_parent">
            <text fill="black" dx="10" dy="20">
                <tspan>document.registerElement</tspan>
            </text>
            </a>
        </g>

        <path stroke="#666666" d="m236.5328 133.71341l0 345.41733"></path>
        <path stroke="#666666" d="m207.46194 287.07086l25.832764 0"></path>
        <path stroke="#666666" d="m233.2947 287.07086l-1.1245728 1.1245728l3.0897675 -1.1245728l-3.0897675 -1.1245728z"></path>
        <path stroke="#666666" d="m207.46194 342.7034l24.289444 0"></path>
        <path stroke="#666666" d="m231.75139 342.7034l-1.124588 1.1246033l3.0897675 -1.1246033l-3.0897675 -1.1245728z"></path>
        <path stroke="#666666" d="m207.4672 403.30972l25.04535 0"></path>
        <path stroke="#666666" d="m232.51254 403.30972l-1.1245728 1.1245728l3.0897675 -1.1245728l-3.0897675 -1.1246033z"></path>
        <path stroke="#666666" d="m236.5328 403.27646l502.77762 0"></path>
        <path stroke="#666666" d="m739.3104 403.27646l-1.1245728 1.1245728l3.0897827 -1.1245728l-3.0897827 -1.1246033z"></path>
        <path stroke="#666666" d="m207.47769 235.2021l25.832764 0"></path>
        <path stroke="#666666" d="m233.31044 235.2021l-1.1245728 1.124588l3.0897675 -1.124588l-3.0897675 -1.124588z"></path>
        <path stroke="#666666" d="m207.4672 474.8924l25.04535 0"></path>
        <path stroke="#666666" d="m232.51254 474.8924l-1.1245728 1.1245728l3.0897675 -1.1245728l-3.0897675 -1.1246033z"></path>
        <path stroke="#666666" stroke-dasharray="1.0,3.0" d="m468.10236 297.46457l47.338562 0"></path>
        <path stroke="#666666" d="m207.47769 74.528496l68.7619 0"></path>
        <path stroke="#666666" d="m276.2396 74.528496l-1.1246033 1.124588l3.0897827 -1.124588l-3.0897827 -1.1245804z"></path>
        <path stroke="#666666" d="m279.66666 72.07612l0 229.5748"></path>
        <path stroke="#666666" d="m280.10236 297.46457l25.832764 0"></path>
        <path stroke="#666666" d="m305.93512 297.46457l-1.1245728 1.1245728l3.0897522 -1.1245728l-3.0897522 -1.1245728z"></path>
        <path stroke="#666666" d="m280.10236 74.65879l25.832764 0"></path>
        <path stroke="#666666" d="m305.93512 74.65879l-1.1245728 1.124588l3.0897522 -1.124588l-3.0897522 -1.1245804z"></path>
        <path stroke="#666666" d="m207.46194 137.28346l25.832764 0"></path>
        <path stroke="#666666" d="m233.2947 137.28346l-1.1245728 1.124588l3.0897675 -1.124588l-3.0897675 -1.124588z"></path>
        <path stroke="#666666" d="m468.42783 74.65879l18.903625 0"></path>
        <path stroke="#666666" d="m487.33145 74.65879l-1.1246033 1.124588l3.0897827 -1.124588l-3.0897827 -1.1245804z"></path>
        <path stroke="#666666" d="m491.54068 72.03937l0 83.968506"></path>
        <path stroke="#666666" d="m492.32285 74.65879l18.903625 0"></path>
        <path stroke="#666666" d="m511.22647 74.65879l-1.1246033 1.124588l3.0897827 -1.124588l-3.0897827 -1.1245804z"></path>
        <path stroke="#666666" d="m492.32285 153.72966l18.903625 0"></path>
        <path stroke="#666666" d="m511.22647 153.72966l-1.1246033 1.124588l3.0897827 -1.124588l-3.0897827 -1.124588z"></path>
        <path stroke="#666666" d="m673.9344 74.65879l91.34454 0"></path>
        <path stroke="#666666" d="m765.27893 74.65879l-1.1245728 1.124588l3.0897827 -1.124588l-3.0897827 -1.1245804z"></path>
        <path stroke="#666666" d="m673.9344 147.85301l66.147705 0"></path>
        <path stroke="#666666" d="m740.0821 147.85301l-1.1245728 1.124588l3.0897827 -1.124588l-3.0897827 -1.1245728z"></path>
        <path stroke="#666666" d="m207.47769 546.47504l98.45743 0"></path>
        <path stroke="#666666" d="m305.93512 546.47504l-1.1245728 1.1246338l3.0897522 -1.1246338l-3.0897522 -1.1245728z"></path>
        <path stroke="#666666" d="m491.54068 543.0131l0 79.1496"></path>
        <path stroke="#666666" d="m207.46194 618.05774l280.6674 0"></path>
        <path stroke="#666666" d="m488.12933 618.05774l-1.1245728 1.1245728l3.0897827 -1.1245728l-3.0897827 -1.1245728z"></path>
        <path stroke="#666666" d="m468.65616 546.55383l18.903625 0"></path>
        <path stroke="#666666" d="m487.55978 546.55383l-1.1245728 1.1245728l3.0897522 -1.1245728l-3.0897522 -1.1246338z"></path>
        <path stroke="#666666" d="m491.55643 546.47504l273.70676 0"></path>
        <path stroke="#666666" d="m765.2632 546.47504l-1.1245728 1.1246338l3.0897827 -1.1246338l-3.0897827 -1.1245728z"></path>
        <path stroke="#666666" d="m673.9344 300.2139l66.147705 0"></path>
        <path stroke="#666666" d="m740.0821 300.2139l-1.1245728 1.1246033l3.0897827 -1.1246033l-3.0897827 -1.1245728z"></path>
        <path stroke="#666666" d="m742.9895 145.2336l0 261.19684"></path>
        <path stroke="#666666" d="m743.49866 403.30972l21.769775 0"></path>
        <path stroke="#666666" d="m765.26843 403.30972l-1.1245728 1.1245728l3.0897827 -1.1245728l-3.0897827 -1.1246033z"></path>
        <path stroke="#666666" d="m848.06036 572.6798l0 41.950867"></path>
        <path stroke="#666666" d="m848.06036 614.6307l-1.1245728 -1.1246338l1.1245728 3.0897827l1.1245728 -3.0897827z"></path>
    </g>
</svg>