Re: [w3c/webcomponents] Custom Element definition ordering can cause difficult-to-find bugs. (#668)

To depict the situation, the following HTML shows all the test cases that I'm testing (I comment them all out except for one at a time, for now). They're labeled as WORKS or BROKEN. I've got just a few broken ones left to fix. The ones that work show visual output like

![screenshot 2017-10-08 at 1 33 47 am](https://user-images.githubusercontent.com/297678/31315233-e2739138-abc8-11e7-87c5-03bfebaac85b.png)


```html
<!DOCTYPE html>
<html>
    <body>

        <!--This script only defines classes.-->
        <script src="./infamous.js"></script>

        <style>
            body, html { width: 100%; height: 100%; }
            i-node { border: 1px solid red; }
        </style>

        <script>
            console.log('--- beginning of body')
        </script>

         WORKS -------------------------------------------------------- 
        <script>
            console.log('  ---- define elements ---- ')
            infamous.html.useDefaultNames()
        </script>
        <i-scene>
            <i-node absoluteSize="100 100 100" rotation="30 30 30">
                <p> hello </p>
            </i-node>
        </i-scene>

         WORKS -------------------------------------------------------- 
        <i-scene>
            <i-node absoluteSize="100 100 100" rotation="30 30 30">
                <p> hello </p>
            </i-node>
        </i-scene>
        <script>
            console.log('  ---- define elements ---- ')
            infamous.html.useDefaultNames()
        </script>

         WORKS -------------------------------------------------------- 
        <script>
            console.log('  ---- define elements ---- ')
            infamous.html.useDefaultNames()
        </script>
        <script>
        document.body.insertAdjacentHTML('beforeend', `
            <i-scene>
                <i-node absoluteSize="100 100 100" rotation="30 30 30">
                    <p> hello </p>
                </i-node>
            </i-scene>
        `)
        </script>

         WORKS -------------------------------------------------------- 
        <script>
        document.body.insertAdjacentHTML('beforeend', `
            <i-scene>
                <i-node absoluteSize="100 100 100" rotation="30 30 30">
                    <p> hello </p>
                </i-node>
            </i-scene>
        `)
        </script>
        <script>
            console.log('  ---- define elements ---- ')
            infamous.html.useDefaultNames()
        </script>

         BROKEN -------------------------------------------------------- 
        <script>
            setTimeout(() => {
                console.log('  ---- define elements ---- ')
                infamous.html.useDefaultNames()
            }, 0)
        </script>
        <i-scene>
            <i-node absoluteSize="100 100 100" rotation="30 30 30">
                <p> hello </p>
            </i-node>
        </i-scene>

         BROKEN -------------------------------------------------------- 
        <script>
            setTimeout(() => {
                console.log('  ---- define elements ---- ')
                infamous.html.useDefaultNames()
            }, 0)
        </script>
        <script>
        document.body.insertAdjacentHTML('beforeend', `
            <i-scene>
                <i-node absoluteSize="100 100 100" rotation="30 30 30">
                    <p> hello </p>
                </i-node>
            </i-scene>
        `)
        </script>

         WORKS -------------------------------------------------------- 
        <script>
            console.log('  ---- define elements ---- ')
            infamous.html.useDefaultNames()
        </script>
        <script>
        document.write(`
            <i-scene>
                <i-node absoluteSize="100 100 100" rotation="30 30 30">
                    <p> hello </p>
                </i-node>
            </i-scene>
        `)
        </script>

         WORKS -------------------------------------------------------- 
        <script>
        document.write(`
            <i-scene>
                <i-node absoluteSize="100 100 100" rotation="30 30 30">
                    <p> hello </p>
                </i-node>
            </i-scene>
        `)
        </script>
        <script>
            console.log('  ---- define elements ---- ')
            infamous.html.useDefaultNames()
        </script>

         BROKEN -------------------------------------------------------- 
        <script>
            setTimeout(() => {
                console.log('  ---- define elements ---- ')
                infamous.html.useDefaultNames()
            }, 0)
        </script>
        <script>
        document.write(`
            <i-scene>
                <i-node absoluteSize="100 100 100" rotation="30 30 30">
                    <p> hello </p>
                </i-node>
            </i-scene>
        `)
        </script>

         WORKS -------------------------------------------------------- 
        <script>
            Promise.resolve().then(() => {
                console.log('  ---- define elements ---- ')
                infamous.html.useDefaultNames()
            })
        </script>
        <script>
        document.write(`
            <i-scene>
                <i-node absoluteSize="100 100 100" rotation="30 30 30">
                    <p> hello </p>
                </i-node>
            </i-scene>
        `)
        </script>

         WORKS -------------------------------------------------------- 
        <script>
        document.write(`
            <i-scene>
                <i-node absoluteSize="100 100 100" rotation="30 30 30">
                    <p> hello </p>
                </i-node>
            </i-scene>
        `)
        </script>
        <script>
            Promise.resolve().then(() => {
                console.log('  ---- define elements ---- ')
                infamous.html.useDefaultNames()
            })
        </script>

         BROKEN -------------------------------------------------------- 
        <script>
            Promise.resolve().then(() => {
                console.log('  ---- define elements ---- ')
                infamous.html.useDefaultNames()
            })
        </script>
        <i-scene>
            <i-node absoluteSize="100 100 100" rotation="30 30 30">
                <p> hello </p>
            </i-node>
        </i-scene>

         WORKS -------------------------------------------------------- 
        <i-scene>
            <i-node absoluteSize="100 100 100" rotation="30 30 30">
                <p> hello </p>
            </i-node>
        </i-scene>
        <script>
            Promise.resolve().then(() => {
                console.log('  ---- define elements ---- ')
                infamous.html.useDefaultNames()
            })
        </script>

         WORKS -------------------------------------------------------- 
        <script>
            Promise.resolve().then(() => {
                console.log('  ---- define elements ---- ')
                infamous.html.useDefaultNames()
            })
        </script>
        <script>
        document.body.insertAdjacentHTML('beforeend', `
            <i-scene>
                <i-node absoluteSize="100 100 100" rotation="30 30 30">
                    <p> hello </p>
                </i-node>
            </i-scene>
        `)
        </script>

         WORKS -------------------------------------------------------- 
        <script>
        document.body.insertAdjacentHTML('beforeend', `
            <i-scene>
                <i-node absoluteSize="100 100 100" rotation="30 30 30">
                    <p> hello </p>
                </i-node>
            </i-scene>
        `)
        </script>
        <script>
            Promise.resolve().then(() => {
                console.log('  ---- define elements ---- ')
                infamous.html.useDefaultNames()
            })
        </script>

         WORKS -------------------------------------------------------- 
        <script>
            Promise.resolve().then(() => {
                console.log('  ---- define elements ---- ')
                infamous.html.useDefaultNames()
            })
        </script>
        <script>
        document.body.insertAdjacentHTML('afterbegin', `
            <i-scene>
                <i-node absoluteSize="100 100 100" rotation="30 30 30">
                    <p> hello </p>
                </i-node>
            </i-scene>
        `)
        </script>

         WORKS -------------------------------------------------------- 
        <script>
        document.body.insertAdjacentHTML('afterbegin', `
            <i-scene>
                <i-node absoluteSize="100 100 100" rotation="30 30 30">
                    <p> hello </p>
                </i-node>
            </i-scene>
        `)
        </script>
        <script>
            Promise.resolve().then(() => {
                console.log('  ---- define elements ---- ')
                infamous.html.useDefaultNames()
            })
        </script>

        <script>
            console.log('--- end of body')
        </script>

    </body>
</html>
```



-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/668#issuecomment-334991689

Received on Sunday, 8 October 2017 08:35:33 UTC