标签: x-tag

是否有可能来命名自己的自定义元素<date>,<person>,<city>或其他不使用破折号？没有它们可以使用定义元素吗？

我正在研究我的第一个X-Tag应用程序,在它的页面上,它表示它可以与Web组件API一起使用,例如"自定义元素,影子DOM,模板和HTML导入".

我已经开始研究我的模板,但是导入它们的最佳选择是什么,现在已经弃用了HTML Imports？

如何选择以"x-"标记名称开头的节点,这是一个层次结构DOM树示例:

<div>
  <x-tab>
    <div></div>
    <div>
      <x-map></x-map>
    </div>
  </x-tab>
</div>
<x-footer></x-footer>

jQuery不允许我查询$('x-*'),有什么方法可以实现这个吗？

最近,微软开始使用新的X-Tag库来创建自定义元素.该网站说,

X-标签是微软的支持,开源,JavaScript库,包装了W3C标准Web组件系列的API,以提供快速组件开发一个紧凑的,功能丰富的接口.虽然X-标签提供功能挂钩的所有Web组件的API(自定义元素,影子DOM,模板和HTML进口),只需要定义元素的支持工作.在缺少原生Custom Element支持的情况下,X-Tag使用与Google的Polymer框架共享的一组polyfill.您可以在"构建"部分中查看我们的包选项

据我所知,就在不久之前,甚至Mozilla都有一个类似的项目,其名称与X-Tag完全相同.

这些项目如何相互不同？或者他们是同一个项目,重新品牌？

当我们使用聚合物或 x-tag 时，我们必须注册一个新元素。但是为什么，如果我们可以使用普通的 es6 javascript 来构建一个没有 registerElement 的阴暗组件。这在最新版本的 Chrome、Firefox 和 Edge 中运行良好，无需使用 polyfill 或转译为 es5。

<a-custom-element id="aid"></a-custom-element>

<template id="a-custom-element">  
    ....  // html
</template>

我使用这个函数来初始化（挂载）组件类实例：

function mountCustomElement(custom_tag, custom_class) {
    Array.from(document.querySelectorAll(custom_tag)).forEach((element) => {
            new custom_class(element, custom_tag);
    });
}
document.addEventListener("DOMContentLoaded", function () {
    ....
    mountCustomElement('a-custom-element', AComponent);
    ....
}); 

组件类：

class AComponent {             // without the extend HTMLElement !!
    constructor(custom_element, template_id) {

        this.id = custom_element.id;
        let content = document.querySelector(`#${template_id}`).content;
        // for easy inspection
        AComponent.hasOwnProperty('instances') ?Acomponent.instances.push(this) :AComponent.instances = [this];

        ....
        let $root = document.querySelector(`#${this.id}`);
        $root.appendChild(document.importNode(content, …

有人能让我对聚合物,x标签和香草js之间的区别有所了解吗？

我在我的项目中使用过聚合物,但我想要比较聚合物,x-tag和vanilla js.

我需要将"tap"事件委托给自定义元素中的关闭按钮,然后在close()根元素上调用方法.这是一个例子:

xtag.register('settings-pane', {
  lifecycle: {
    created: function () {
      var tpl = document.getElementById('settings-pane'),
          clone = document.importNode(tpl.content, true);
      
      this.appendChild(clone);
    }
  },
  events: {
    'tap:delegate(button.close)': function (e) {
      rootElement.close(); // <- I don't know the best way to get rootElement
    }
  },
  methods: {
    close: function () {
      this.classList.add('hidden');
    }
  }
});

<template id="settings-pane">
  <button class="close">?</button>
</template>