JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="lel" >  
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</ul>

CSS

.lel {
    border: 2px solid red;
    width: 400px;
    height: 450px;
    overflow: auto;
}

div  {
    height: 150px;
    width: 300px;
    background-color: skyblue;
    margin-top: 5px;
    margin-bottom: 5px;
    position: relative;
}

.div{
    height: 50px;
    width: 50px;
    background-color: aqua;
    position: absolute;
    top: 50%;
    left: 50%;
}

.hidden {
    background-color: aquamarine;
}

JavaScript

var elemUl = document.body.getElementsByClassName('lel')[0];

elemUl.beAquamarine = function(){
    this.classList.toggle('hidden'); // разве при вызове этого метода обработчиком This не потеряется?
}    

elemUl.create = function(){
    
    this.addEventListener('click', elemUl.beAquamarine)// в обработчике я указываю ссылку на метод elemUl.beAquamarine. Разве в данном случае не должен потеряться контекст this? Ведь что бы его получить метод должен донести this до скобочек (). Коих тут нет, казалось бы нужна обертка. И вообще, elemUl.beAquamarine вызывается из метода addEventListener(), тоесть по дефолту должен потерять контекст? Просто у меня почому то контекст не теряется,  и elemUl меняет цвет.
    
}

elemUl.create();

elemUl.addButton = function(){
    
    for (var i = 0; i < elemUl.children.length; i++){
        
        var button = document.createElement('div');
        button.classList.add('div');
        this.children[i].appendChild(button);
        button.addEventListener('click', function(){ alert ('wow')} );
        button.addEventListener('click', function(event){ event.stopPropagation()});  
        }

    
}    
 elemUl.addButton();