标签: html5-template

使用HTML templates.代码方面,很难为每个html文件保留正确的模板集.

是有可能有模板(S)的文件,很像一个文件css,一个在包括head一节的html文件？

例如,为了补充该style部分head,可以链接到样式表,例如,

<link rel="stylesheet" type="text/css" href="mystyle.css" >

我的应用程序使用了几个集合templates.它们可以像样式表那样处理,即链接到单独的文件中,还是每个template定义都需要直接作为原始html文件的一部分？

是否可以让DocumentFragments包含tr，th或td标签？

如果我这样做：

var template = document.createRange().createContextualFragment(
        '<table></table>'
    );

    console.log(template.childNodes);

我得到的输出[table]。

如果我这样做：

var template = document.createRange().createContextualFragment(
        '<td></td>'
    );

    console.log(template.childNodes);

我得到[]!!!？！？的输出

如果我这样做：

var template = document.createRange().createContextualFragment(
        '<td><p></p></td>'
    );

    console.log(template.childNodes);

我得到[p]??！？！？!! ??！？！?????！

最后，如果我这样做：

var template = document.createRange().createContextualFragment(
        '<span><td></td></span>'
    );

    console.log(template.childNodes);

我知道[span]了-TD哪里去了？

我不明白这里的矛盾之处。文档片段是否可能仅包含某些元素？我想做的是类似于上述第二个操作，然后使用检索td querySelector。

谢谢

假设我创建并插入了一个这样的元素

<template id="react-web-component">
  <span>template stuff</span
  <script src="/static/js/bundle.js" type="text/javascript"></script>
</template>
<script>
  (function (window, document) {
    const doc = (document._currentScript || document.currentScript).ownerDocument;
    const proto = Object.create(HTMLElement.prototype, {
      attachedCallback: {
        value: function () {
          const template = doc.querySelector('template#react-web-component').content;
          const shadowRoot = this.attachShadow({ mode: 'open' });
          shadowRoot.appendChild(template.cloneNode(true));
        },
      },
    });
    document.registerElement('react-web-component', { prototype: proto });
  })(window, document);
</script>
<react-web-component></react-web-component>

现在我想使用 aquerySelector来访问我的元素的开放阴影 dom。像这样：

document.querySelector('react-web-component::shadow')

但这不起作用。有没有其他办法？

编辑以回应@Supersharp 的回答

对不起，我没有说清楚。我使用的 webpackstyle-loader只接受一个 CSS 选择器，它与 一起使用document.querySelector，所以我要的是一个我可以用这种方式使用的 CSS 选择器。

所以，我正在深入研究 HTML5 模板标签，作为未来可能解决我的 Web 应用程序问题的方法。我似乎没有找到的一件事是：你能在模板标签中使用 id 属性吗？

模板可以重用，但 id 不能。因此，从理论上讲，多次使用相同的模板（这就是最初发明它们的原因）将导致无效的 HTML。有官方解答吗？

在 Javascript 中，我试图动态创建一个 HTML<template>元素，附加一个<h1>元素作为其子元素，克隆模板的内容，然后将模板附加到文档正文。

问题是当我访问content模板的属性时它只是返回#document-fragment。

这是代码：

var temp = document.createElement('template');
var h1 = document.createElement('h1');
h1.textContent = 'hello';

var div = document.createElement('div').appendChild(h1)
temp.appendChild(div)

console.log('temp: ', temp)
console.log('temp content: ', temp.content)

var c = document.importNode(temp.content, true)
document.body.appendChild(c)

这是输出console.log's：

我在这里做错了什么？为什么模板的内容显示为空？

我希望以下代码创建一个元素，其中包含一个div带有文本“ Hi” 的元素。

该元素出现在检查器中，但屏幕上看不到任何文本。

当我将模板从a更改template为a时，div将显示文本。我在这里做错了什么？

class MyComponent extends HTMLElement {
    constructor() {
        super()

        const shadowRoot = this.attachShadow({ mode: 'open' })
        const template = document.createElement('template')
        const div = document.createElement('div')

        div.innerHTML = 'Hi'
        template.appendChild(div)

        shadowRoot.appendChild(template.content)
    }
}
customElements.define('my-component', MyComponent)

我想知道是否有一种方法可以获取模板标记中元素的内容并将其作为字符串返回？目前，似乎正在沿线返回一些[object document fragment]内容，但只需要其中的html内容。

function CreateWidget(widget) {
    //Check if browser supports templates
    if ('content' in document.createElement('template')) {
        //Grab the template's content and assign it to a variable so we only have the gut of the template
        var widgetContent = document.querySelector('#panel-template').content //('#panel-template').get(1).setAttribute('id', widget.WidgetCode);
        widgetContent.querySelector('#chart').setAttribute('id', widget.WidgetCode);

        //get the overlay toolbar
        var widgetOverlay = widgetContent.querySelector('.overlayed');
        widgetOverlay.setAttribute('data-render', widget.WidgetCode);
        widgetOverlay.setAttribute('data-chartType', widget.chartType);
        widgetOverlay.setAttribute('data-devID', widget.deviceID);
        widgetOverlay.setAttribute('data-metricType', widget.metricType);
        widgetOverlay.setAttribute('data-title', widget.WidgetName);

        var el = document.importNode(widgetContent, true);
        alert(el);   
    }
}

我正在开发一个应用程序,我将其他html网页加载到当前页面.其他网页是独立的应用程序.我正在尝试在shadow DOM中加载网页.为此,我使用了以下代码,它将尝试在shadowRoot中导入test-template.html.这里我没有使用模板标签,因为我要动态渲染模板(使用ajax).

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </head>
  <body>
     <input type="button" onclick="loadTemplate()" value="Load template">
     <div id="template-holder"></div>
     <script>
     function loadTemplate() {
      var templateUrl = "test-template.html",
      templateReceivedCallback = function(response) {
         var div = document.getElementById('template-holder'),
            shadowRoot = div.attachShadow({
                mode: 'open'
            });
        shadowRoot.innerHTML = response;
      };
     $.get(templateUrl, templateReceivedCallback);
     }
  </script>
 </body>

test-template.html将如下所示:

  <div>Hello from template</div>

 <script>
     alert("this text is from script inside of template")
 </script>

我能够在当前页面中加载提到的test-template.html,但是test-template.html里面的javascript没有执行.有没有办法让脚本运行？如果是,请分享正在运行的示例.谢谢.

我是网络组件的新手.我检查了一些例子,但我真的无法弄清楚如何加载(插入DOM)一个单独的Web组件的内容.从这个例子开始,我把这段代码放在一个名为my-element.html的文件中:

<template id="my-element">
  <p>Yes, it works!</p>
</template>
<script>
    document.registerElement('my-element', class extends HTMLElement {
      constructor() {
      super(); 
      let shadowRoot = this.attachShadow({mode: 'open'});
      const t = document.querySelector('#my-element');
      const instance = t.content.cloneNode(true);
      shadowRoot.appendChild(instance);
    }
});
</script>

这是我的index.html:

<!doctype html> 
<html>
 <head>
   <meta charset="utf-8">
   <title>my titile</title>
   <link rel="import" href="my-element.html">
</head>
<body>
  Does it work?
  <my-element></my-element>
</body>
</html>

我在使用最新的Chrome 56,所以我不需要填充.我运行polyserve,只有"它有效吗？" 出现.我尝试(像原始示例)"customElements.define"语法而不是"document.registerElement",但不起作用.你有什么想法吗？如果我不想使用影子dom,我还能改变什么？

谢谢

我在 DocumentFragment 内部工作，并试图将 HTML 插入其中。我们知道 DocumentFragment 没有innerHTML setter，所以我尝试在DocumentFragment 中插入一个临时节点并在它之后使用 .html 插入HTML insertAdjacentHTML。然后我会删除临时元素，并留下一个带有我想要的 DOM 的片段。

示例：（错误是故意的）

var fragment = document.createDocumentFragment();
var temporaryElement = fragment.appendChild(document.createElement('div'));

// Before we move on.. I can see that the `temporaryElement` does have a parent
console.log(temporaryElement.parentNode.nodeType);

// The following throws an error...
temporaryElement.insertAdjacentHTML('afterend', '<div>Some crazy custom HTML..</div>');

fragment.removeChild(temporaryElement);

我可以清楚地看到临时元素有一个 parentNode，那么为什么会出现这个错误呢？

我一直在阅读<template>标签上的文档，但似乎无法理解它与仅使用<div>that是什么区别。display: none;

文档：模板标签

<template> 例

<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>

VS的 <div>例子

<div id="productrow" style="display: none">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</div>

1. 在较低的级别上，浏览器如何不同地处理这两个示例？
2. 某些JS方法或HTML属性是否不同？

PS：我知道浏览器兼容性差异