addEventListener VS ResizeObserver

Question

I've noticed Salesforce orgs get the error ResizeObserver is not a constructor when Session Settings -> Use Lightning Web Security for Lightning web components and Aura components is not enabled.

I'm come up with an alternative solution for my LWC that does work without LWS using addEventListener. However, I'm having trouble finding out the differences between the two below solutions, and when to choose one over the other (other than that the ResizeObserver solution doesn't work without LWS). When looking at alternative solutions, it is suggested to use lightning:container and polyfill, but never just addEventListener. Will there be unforeseen consequences with using Solution A below instead of Solution B?

SOLUTION A

connectedCallback() {
     window.addEventListener('resize', this.onEventResize);
}

// arrow functions keep the this reference so I can use this.template
// https://salesforce.stackexchange.com/questions/355344/lwc-and-addeventlistener
onEventResize = () => {
    let targetElement2 = this.template.querySelector('.svg-container');
    this.containerWidth = targetElement2.getBoundingClientRect().width;
    this.containerHeight = targetElement2.getBoundingClientRect().height;
    this.refreshD3();
}

renderedCallback() {
    const targetElement = this.template.querySelector('.svg-container');
    this.containerWidth = targetElement.getBoundingClientRect().width;
    this.containerHeight = targetElement.getBoundingClientRect().height;
}

SOLUTION B

renderedCallback() {
    const resizeObserver = new ResizeObserver(entries => {
        for (let entry of entries) {
            //Handle width changes
            this.containerWidth = entry.contentRect.width;
            this.containerHeight = entry.contentRect.height;
            this.refreshD3();
        }
    );

    const targetElement = this.template.querySelector('.svg-container');
    resizeObserver.observe(targetElement);
}

Answer 1

Incase anyone sees this, sfdcfox mentioned that window.addEventListener will run slower than ResizeObserver (I think because it gets called anytime the full window resizes, not just the DOM component I care about), but that both will work. Therefore... a good solution is to attempt to use resizeObserver first...

renderedCallback() {
    try {
        const resizeObserver = new ResizeObserver(entries => {
            for (let entry of entries) {
                this.containerWidth = entry.contentRect.width;
                this.containerHeight = entry.contentRect.height;
                this.refreshD3();
            }
        });
        const targetElement = this.template.querySelector('.svg-container');
        resizeObserver.observe(targetElement);
    } catch {
        window.addEventListener('resize', this.onEventResize);
        this.onEventResize();
    }
}

onEventResize = () => {
    let targetElement = this.template.querySelector('.svg-container');
    this.containerWidth = targetElement.getBoundingClientRect().width;
    this.containerHeight = targetElement.getBoundingClientRect().height;
    this.refreshD3();
}