me(), JavaScript scope, and onloadAdd(...)

[davepeck]

Thanks for this interesting little library and for css-scope-inline, too!

I've been using both in a new project, and have run into a touch of friction that perhaps someone watching the discussions will have some thoughts on.

I'm using boring old Django templates to render HTML.

When I want a little nugget of JavaScript somewhere, I generally find that I want to ensure the document is ready, so I tend to do:

<script>
    // capture me(), since calling it later will fail unable to determine a parentElement
    const self = me();
    onloadAdd(() => doSomething(self));
</script>

My templates tend to have lots of {% include %}s and look sort of component-y, each containing a few lines of css and js; this seems to mesh well with surreal and css-scope-inline.

As a result, my final rendered page often has many small <script> tags. Since bare <script> tags don't introduce new block scopes, I discover at runtime that self is already defined, and my code fails to run.

As a result, I've resorted to using IIFEs everywhere:

<script>
    (function(self) {
        onloadAdd(() => doSomething(self));
    )(me());
</script>

This isn't a big deal, but it does feel a little less elegant.

Alternatively, I suppose I could make all my scripts type="module" since this does introduce new block scope... but this doesn't seem to work in practice. (Not sure if that's a surreal issue or something more basic.)

How do folks tend to structure their code here?

[gnat]

Hey, glad you're enjoying them. You're welcome!

Yeah a few scoping patterns are described in the 💎 Conventions & Tips in the readme.

As mentioned, type="module" does work, but you lose some locality of behavior

Note: me() will no longer see parentElement so explicit selectors are required: me(".mybutton")

[davepeck]

Thanks, that's helpful. Somehow I skipped over that section when I first scanned the README.

Makes sense about type="module" requiring an explicit selector.

In cases where it's needed, what's your personal convention for using onloadAdd(...)? I'm a little torn; I generally want to capture me() right away, which leads to the kind of code I've been writing above. I suppose I could just use an explicit selector in the callback, too.