Using `*.webc` with event listeners, `MutationObserver`

I keep reading the WebC Language Reference, but I can’t seem to grok how to do certain things in WebC that I’ve been doing with event handlers (particularly on pointermove events and MutationObservers).

Here is one example. It is the bare minimum refactor I could do to keep the functionality working properly, so most stuff is probably where it shouldn’t be (all in connectedCallback()).

(Also: I just started with WebC, so go easy on me. 🤓 I know this is super clunky!)

<template webc:nokeep>
    <form id="outputs-pointer">
        <fieldset>
            <legend>Pointer</legend>
            <dl>
                <dt><code>x</code></dt>
                <dd>
                    <code><var id="pointer-x"></var></code>
                    <br>
                    <var id="pointer-x-2feet"></var>
                </dd>
                <dt><code>y</code></dt>
                <dd>
                    <code><var id="pointer-y"></var></code>
                    <br>
                    <var id="pointer-y-2feet"></var>
                </dd>
            </dl>
            <dl>
                <dt><code>clientX</code></dt>
                <dd><code><var id="pointer-client-x"></var></code></dd>
                <dt><code>clientY</code></dt>
                <dd><code><var id="pointer-client-y"></var></code></dd>
            </dl>
            <dl>
                <dt><code>screenX</code></dt>
                <dd><code><var id="pointer-screen-x"></var></code></dd>
                <dt><code>screenY</code></dt>
                <dd><code><var id="pointer-screen-y"></var></code></dd>
            </dl>
        </fieldset>
    </form>
</template>


<script type="module">
    import { getPointFromEventForElement } from '../scripts/components/map.mjs'
    import { pipe } from '../scripts/utils/tools.mjs'
    import {
        inches2feet,
        feet2inches,
        roundToNearestEighth,
        // roundToNearestSixteenth
    } from '../scripts/utils/measurements.mjs'
    import {
        toFractionFormat,
        formatFtInches,
        wrapFractionInElement,
        FRACTION_MAP
    } from '../scripts/utils/formatting.mjs'

    const svgEl                     = document.querySelector('#unity-map')
    const getPointFromEvent         = getPointFromEventForElement(svgEl)
    const roundAndFormatCoordinate  = pipe(
        roundToNearestEighth,
        inches2feet,
        formatFtInches
    )

    class PointerOutput extends HTMLElement {
        connectedCallback() {
            //  Pointer values (map coords)
            const px        = this.querySelector(':scope #pointer-x')
            const px2feet   = this.querySelector(':scope #pointer-x-2feet')
            const py        = this.querySelector(':scope #pointer-y')
            const py2feet   = this.querySelector(':scope #pointer-y-2feet')
            //  Pointer values (client* / viewport coords)
            const pcX       = this.querySelector(':scope #pointer-client-x')
            const pcY       = this.querySelector(':scope #pointer-client-y')
            //  Pointer values (screen coords)
            const psX       = this.querySelector(':scope #pointer-screen-x')
            const psY       = this.querySelector(':scope #pointer-screen-y')

            const updatePointerOutputOnPointerMove = (event) => {
                //  pointer’s SVG coords
                const pointer       = getPointFromEvent(event)

                px.textContent      = roundToNearestEighth(pointer.x)
                px2feet.textContent = roundAndFormatCoordinate(pointer.x)

                py.textContent      = roundToNearestEighth(pointer.y)
                py2feet.textContent = roundAndFormatCoordinate(pointer.y)

                //  other coords
                const {
                    clientX, clientY,
                    screenX, screenY
                } = event

                pcX.textContent     = roundToNearestEighth(clientX)
                pcY.textContent     = roundToNearestEighth(clientY)

                psX.textContent     = roundToNearestEighth(screenX)
                psY.textContent     = roundToNearestEighth(screenY)
            }

            //  Update pointer output when the pointer moves
            svgEl.addEventListener('pointermove', updatePointerOutputOnPointerMove)

            //  Zooming also changes pointer position relative to the map itself
            svgEl.addEventListener('wheel', updatePointerOutputOnPointerMove)
        }
    }

    window.customElements.define('pointer-output', PointerOutput)
</script>

Start with the linked WebC Language Reference and the inline PointerOutput custom-element example. Determine what guidance is missing for pointermove, wheel, and MutationObserver usage in WebC, then document a clear supported pattern and its lifecycle considerations. Done means a newcomer can follow the reference to implement these event-driven behaviors without relying on the example’s unanswered question.