html fragment & html template & virtual DOM & web components

html fragment & html template & virtual DOM

https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

Fragment

const dom = document.querySelector('#list');

const fruits = ['Apple', 'Orange', 'Banana', 'Melon'];

const fragment = new DocumentFragment()

fruits.forEach(function (fruit) {
  let li = document.createElement('li');
  li.innerHTML = fruit;
  fragment.appendChild(li);
})

dom.appendChild(fragment);

template

// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {

    // Instantiate the table with the existing HTML tbody
    // and the row with the template
   const template = document.querySelector('#productrow');

    // Clone the new row and insert it into the table
    let tbody = document.querySelector("tbody");
    let clone = document.importNode(template.content, true);

    let td = clone.querySelectorAll("td");
    td[0].textContent = "1235646565";
    td[1].textContent = "Stuff";

    tbody.appendChild(clone);

    // Clone the new row and insert it into the table
    let clone2 = document.importNode(template.content, true);

    td = clone2.querySelectorAll("td");
    td[0].textContent = "0384928528";
    td[1].textContent = "Acme Kidney Beans 2";

    tbody.appendChild(clone2);

} else {
  // Find another way to add the rows to the table because 
  // the HTML template element is not supported.
}

slot

web components

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots

web components

custom element

https://developer.mozilla.org/en-US/docs/Web/Web_Components

refs

html fragment & html template & virtual DOM

https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

Fragment

const dom = document.querySelector('#list');

const fruits = ['Apple', 'Orange', 'Banana', 'Melon'];

const fragment = new DocumentFragment()

fruits.forEach(function (fruit) {
  let li = document.createElement('li');
  li.innerHTML = fruit;
  fragment.appendChild(li);
})

dom.appendChild(fragment);

template

// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {

    // Instantiate the table with the existing HTML tbody
    // and the row with the template
   const template = document.querySelector('#productrow');

    // Clone the new row and insert it into the table
    let tbody = document.querySelector("tbody");
    let clone = document.importNode(template.content, true);

    let td = clone.querySelectorAll("td");
    td[0].textContent = "1235646565";
    td[1].textContent = "Stuff";

    tbody.appendChild(clone);

    // Clone the new row and insert it into the table
    let clone2 = document.importNode(template.content, true);

    td = clone2.querySelectorAll("td");
    td[0].textContent = "0384928528";
    td[1].textContent = "Acme Kidney Beans 2";

    tbody.appendChild(clone2);

} else {
  // Find another way to add the rows to the table because 
  // the HTML template element is not supported.
}

slot

web components

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots

web components

custom element

https://developer.mozilla.org/en-US/docs/Web/Web_Components

refs

html fragment
html template
virtual DOM
web components
html, fragment, template, virtual DOM, js, svg, HTML5, slot, web components

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---