listener for DOMContentLoaded and window resize

[adrianhall]

One of the concrete things I want to do is to resize a font within the shadow DOM when the window is resized. However the attached event fires before the DOM is ready and I can't just listen to resize events on an object. It would be ideal to enable something like:

listeners: {
   'document.DOMContentLoaded': 'domReady',
   'window.resize': 'resizeObserver'
},

Alternative / workaround is to use addEventListener to set the event handler.

[ebidel]

For this particular case you may want to consider:

• css media queries (or a listener) in your element
• using viewport units

The first will fire much less often than a resize event. The second removes the need for JS entirely :)

[adrianhall]

Thanks Eric. In this particular case, I managed to get around it (and I've written a blog about my experience on this topic - coming out later this month, since my blog is backlogged several days right now). Neither of these worked because of the nature I wanted to get out of my component. Short version is that I wanted to do:

<div style="width: 20%">
   <my-webcomponent></my-webcomponent>
</div>

Inside the web component, I have a DIV that is 30% of the height of the component. I wanted to make the component be square (instead of just the height of the DIV) and the font-size style property to scale with the size of the containing DIV. Since the containing DIV can be anything (I envisioned using the same component in several pages since it's just encapsulated content), the media queries and viewport units would not work.

I ended up using the following code:

    //#region Global Event Listeners
    domReady: function() {
        this.windowResize();
    },

    windowResize: function() {
        // Make the object square by setting height == width
        this.style.height = this.offsetWidth + "px";

        // Make the character name font fit inside the containing DIV
        var textHeight = Math.floor(this.offsetHeight * 0.12);
        Polymer.dom(this).querySelector("h1").style.fontSize = textHeight + "px";
    },
    //#endregion

    //#region Lifecycle event handlers
    ready: function() {
        var that = this;
        // Add event handler for DOMContentLoaded
        if (document.readyState != 'loading') {
            this.domReady();
        } else {
            window.addEventListener('DOMContentLoaded', function () { that.domReady(); });
        }

        // Add event handler for window resize
        window.addEventListener("resize", function() { that.windowResize(); });
    },
    //#endregion

It has a small problem if you don't have a script tag at the bottom of the page - DOMContentLoaded fires before style has set up the size of all the elements, meaning that the dnd-gridcharacter object is zero width. Solution was to put a script block at the end.

My complete web component is here: https://github.com/adrianhall/blog-code/tree/master/CharacterSheet/src/elements/dnd-gridcharacter