constructor()

in resources/todomvc/vanilla-examples/javascript-web-components/src/components/todo-item/todo-item.component.js [13:52]

• 31 lines of code
• 3 McCabe index (conditional complexity)

    constructor() {
        super();

        // Renamed this.id to this.itemid and this.title to this.itemtitle.
        // When the component assigns to this.id or this.title, this causes the browser's implementation of the existing setters to run, which convert these property sets into internal setAttribute calls. This can have surprising consequences.
        // [Issue]: https://github.com/WebKit/Speedometer/issues/313
        this.itemid = "";
        this.itemtitle = "Todo Item";
        this.itemcompleted = "false";

        const node = document.importNode(template.content, true);
        this.item = node.querySelector(".todo-item");
        this.toggleLabel = node.querySelector(".toggle-todo-label");
        this.toggleInput = node.querySelector(".toggle-todo-input");
        this.todoText = node.querySelector(".todo-item-text");
        this.todoButton = node.querySelector(".remove-todo-button");
        this.editLabel = node.querySelector(".edit-todo-label");
        this.editInput = node.querySelector(".edit-todo-input");

        this.shadow = this.attachShadow({ mode: "open" });
        this.htmlDirection = document.dir || "ltr";
        this.setAttribute("dir", this.htmlDirection);
        this.shadow.adoptedStyleSheets = [globalStyles, itemStyles];
        this.shadow.append(node);

        this.keysListeners = [];

        this.updateItem = this.updateItem.bind(this);
        this.toggleItem = this.toggleItem.bind(this);
        this.removeItem = this.removeItem.bind(this);
        this.startEdit = this.startEdit.bind(this);
        this.stopEdit = this.stopEdit.bind(this);
        this.cancelEdit = this.cancelEdit.bind(this);

        if (window.extraTodoItemCssToAdopt) {
            let extraAdoptedStyleSheet = new CSSStyleSheet();
            extraAdoptedStyleSheet.replaceSync(window.extraTodoItemCssToAdopt);
            this.shadow.adoptedStyleSheets.push(extraAdoptedStyleSheet);
        }
    }