Включите атрибуты в document.createElement для пользовательских элементов

class Item extends HTMLElement {
    connectedCallback() {
        this.src = this.getAttribute("src");
        this.link = this.getAttribute("href");
        this.attachShadow({ mode: 'open'});
        this.text = this.textContent.trim();

        this.shadowRoot.innerHTML = `
        <style>/* Styles excluded */</style>
        <div>
            <a href='${this.link}'>
                <div class = "bg">
                    <img src = "${this.src}" alt = "${this.text}">
                </div>
                <p>${this.text}</p>
            </a>
        </div>
        `;
    }
}

customElements.define('div-item', Item);


function createDivItems() {
  // Get all elements with the class name "row"
  var rows = document.getElementsByClassName("row");

  // Iterate over each row element
  for (var j = 0; j < rows.length; j++) {
    var row = rows[j];

    // Remove all existing div-item elements from the row
    row.innerHTML = '';

    // Create and add elements based on the window width
    for (var i = 0; i < (window.innerWidth - 60); i += 120) {
      // Create a new custom element
      // Note: the options argument of createElement only takes an 'is' property
      var elem = document.createElement("div-item"); 

      // Set attributes for the custom element
      elem.setAttribute("src", "assets/not found.png");
      elem.setAttribute("href", "/newPage.php");

      elem.innerHTML = 'not used.'

      // Append the custom element to the current row
      row.appendChild(elem);
    }
  }
}

createDivItems();

<div class = "row"></div>

<div id = "row1" class = "row">FOO</div>
<div id = "row2" class = "row">BAR</div>
<div id = "row3" class = "row">BAZ</div>

<script>
  customElements.define('div-item', class extends HTMLElement {
    connectedCallback() {
      let src = this.getAttribute("src");
      this.attachShadow({mode:'open'})
          .innerHTML = `<img src = "${src}" style = "width:40px">` + this.textContent.trim();
    }
  });

  var rows = [...document.getElementsByClassName("row")];
  rows.map(row => {
    row.innerHTML = ''; // delete FOO, BAR in row
    const length = Math.ceil((window.innerWidth - 60) / 120);
    console.info(row.id, "add", length, "div-items");
    const items = Array(length).fill(0).map((_, index) => {
      let elem = document.createElement("div-item");
      elem.setAttribute("src", "//we-are-all.github.io/sheep.svg");
      elem.append(row.id, "-", index);
      return elem;
    });
    row.append(...items); // append to row ONCE!!
  })
</script>