javascript Web组件布局顺序相反

vs91vp4v 于 2023-01-16 发布在 Java

关注(0)|答案(1)|浏览(122)

有人能帮我理解为什么要渲染这个布局吗？

customElements.define(
  "my-resume",
  class myresume extends HTMLElement {
    constructor() {
      super();
      let h1 = document.createElement("h1");
      h1.textContent="My Resume Name";
      this.appendChild(h1);
    }
  }
);

customElements.define(
  "job-experience",
  class jobexperience extends HTMLElement {
    constructor() {
      super();
      let h1 = document.createElement("h1");
      h1.textContent="Job Experience";
      this.appendChild(h1);
    }
  }
);

customElements.define(
  "company-name",
  class extends HTMLElement {
    constructor() {
      super();
      let div = document.createElement("div");
      div.textContent = this.getAttribute("name");
      this.appendChild(div);    
    }

  }
);

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My Resume Template</title>
    <script src="myresume.js" defer></script>
    <link rel="stylesheet" href="myresume.css" />
  </head>
  <body>
    <my-resume>
      <job-experience>
        <company-name name="The Last Company Worked"></company-name>
      </job-experience>
    </my-resume>
  </body>
</html>

元素视图：

我可以理解为什么整个布局与HTML标记相反。例如，如果我将H1元素上移到父容器的顶部，情况会更好。但我不理解为什么每个新的自定义元素都像一个堆栈（每个新元素都被推到顶部），最后添加的元素总是呈现在其他元素之上。
自定义元素创建逻辑确定创建顺序。它从每个父元素开始，然后向下执行。但是append child会颠倒顺序，因为浏览器总是首先呈现最后一个附加的子元素。

JavaScript

来源：https://stackoverflow.com/questions/74975818/webcomponent-layout-is-in-reverse-order

1条答案

按热度按时间

6l7fqoea1#

正如Patric Evans所提到的，布局呈现的方式是因为使用了[appendChild]，它会在最后一个子节点之后插入节点。如果使用[prepend]，布局将呈现预期的方式。
正如Danny Engleman提到的，不要在构造函数中进行DOM操作。
我相信这更像是你想要的。

customElements.define(
  "my-resume",
  class myresume extends HTMLElement {
    constructor() {
      super();
    }

    connectedCallback() {
        let h1 = document.createElement("h1");
        h1.textContent="My Resume Name";
        this.prepend(h1);
        // this.appendChild(h1);
    }
  }
);

customElements.define(
  "job-experience",
  class jobexperience extends HTMLElement {
    constructor() {
      super();
    }

    connectedCallback() {
      let h1 = document.createElement("h1");
      h1.textContent="Job Experience";
      // this.appendChild(h1);
      this.prepend(h1);

    }
  }
);

customElements.define(
  "company-name",
  class extends HTMLElement {
    constructor() {
      super();
    }

    connectedCallback() {
      let div = document.createElement("div");
      div.textContent = this.getAttribute("name");
      // this.appendChild(div);
      this.prepend(div);
    }

  }
);

<my-resume>
    <job-experience>
        <company-name name="The Last Company Worked"></company-name>
    </job-experience>
</my-resume>

赞(0）回复(0）举报 2023-01-16

我来回答

javascript Web组件布局顺序相反

1条答案

相关问题

热门标签

最新问答