Использование модуля данных и экспорта класса по умолчанию

Question

В настоящее время я работаю над несколькими проектами и заметил, что все они работают одинаково. Но я не понимаю, как они настроены и как работают.

У меня есть два файла: один JS, один HTML. В файле HTML есть такая строка:

<div data-module="sample"></div>

Файл JS выглядит примерно так:

export default class Sample {
    constructor(el, values) {
        this.el = el;
        this.v = values;
        this.v.eClick = this.v.eClick || true;
        this.link = null;
        this.eClickArea();
    }

    eClickArea() {
        if (this.v.eClick) {
            // Do stuff
        }
    }

    eClick(event, link) {
        
        if (event.target !== link) {
            // Do stuff         
        }
    }
}

Мои вопросы:

1. По какой-то причине часть JS выполняется, когда открывается HTML -файл. Я узнал, что он работает по имени и модулю данных. Если я изменю «Образец» или «образец» или имя файла «образец». Перестает работать. Но я понятия не имею, КАК это работает.
2. Я ожидал чего-то вроде const sample = new Sample ("a", "b"); но это нигде в проекте. Как выполняется этот скрипт? А как параметры передаются? Есть какие-нибудь подсказки, где я могу искать?
3. Вероятно, это связано с первыми двумя вопросами. Но я не могу настроить таргетинг на другие элементы на странице. document.getElementById ("тест"); ничего не делает. Почему?

Я понимаю, что мой вопрос более открытый, чем обычные вопросы типа «мой-код-не-работает-вроде-вопросов», но, пожалуйста, оставьте свое мнение, так как это не так разрешено здесь. Я просто хотел бы знать, как все работает.