最近,微软开始使用新的X-Tag库来创建自定义元素.该网站说,
X-标签是微软的支持,开源,JavaScript库,包装了W3C标准Web组件系列的API,以提供快速组件开发一个紧凑的,功能丰富的接口.虽然X-标签提供功能挂钩的所有Web组件的API(自定义元素,影子DOM,模板和HTML进口),只需要定义元素的支持工作.在缺少原生Custom Element支持的情况下,X-Tag使用与Google的Polymer框架共享的一组polyfill.您可以在"构建"部分中查看我们的包选项
据我所知,就在不久之前,甚至Mozilla都有一个类似的项目,其名称与X-Tag完全相同.
这些项目如何相互不同？或者他们是同一个项目,重新品牌？
尝试webcomponents但是我得到了一个错误.
标记很简单,应该可行.2个文件,都是html文件.
错误标记在<script>控制台中的标记上.
谢谢你的帮助.
PS.我正在运行Google Chrome测试版以使customElements正常运行.
KM-button.html
<script>
class KmButton extends HTMLButtonElement {
constructor() {
super();
}
}
customElements.define('km-button', KmButton, {extends: 'button'});
</script>
的index.html
<!DOCTYPE html>
<html>
<head>
<!-- import webcomponents -->
<link rel="import" href="./components/km-button.html">
</head>
<body>
<km-button>hej</km-button>
</body>
</html>
错误
km-button.html:1 Uncaught TypeError: Illegal constructor(…)KmButton @ km-button.html:7
TypeScript 2.1显然现在支持编写自定义html元素（“ TypeScript 2.1的新功能”）
但是，我一直找不到有关应该如何工作的任何文档。
谁能通过理想的例子提供解释，说明它应该如何工作？
谢谢
假设我们有一个以这种方式使用的自定义元素:
<list-image>
<img src="" />
....
</list-image>
其中list-image以滑块方式显示img标签.如果组件的用户插入了img标记
document.querySelector('list-image').insertAdjacentHTML('beforeend', '<img src="..." />');
组件是否可以知道新元素img？
长话短说
\n\n如何将 div 元素的内联 onclick 事件的回调绑定到放置 div 的自定义元素？\n我想使用而onclick="foo(\'bar\')"不是onclick="this.foo(\'bar\')".
长版：
\n\n将带有可点击 div 的自定义元素附加到DOM ，如下所示：
\n\n<my-element>\n <!-- 1. works -->\n <div onclick="this.foo(\'bar\')">click me</div>\n\n <!-- 2. not working -->\n <div onclick="foo(\'bar\')">click me</div>\n\n <!-- edit: 3. playground (works) -->\n <div onclick="me.foo(\'bar\')">click me</div>\n</my-element>\n...现在我想将 -function 绑定foo()到我的自定义元素 ( <my-element>)。
第一个解决方案：这里onclick调用( )foo()上的 - 函数，稍后将其绑定到我的自定义元素（请参阅以下代码）。thisthis.foo()this
第二个解决方案：在这里我想省略this.并再次将其绑定到我的自定义元素。但是：虽然绑定在上述解决方案（1.）中有效，但它并非没有前置this.- 这是我的问题。
我正在尝试创建一个包装器自定义元素，将其子自定义元素包装到 div 中。
但子元素没有被包装。相反，一个空的 div 被插入到子元素之前的包装元素中
<script>
class ListItem extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = "<div>ListItem</div>";
}
}
class List extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = `<div class="list">${this.innerHTML}</div>`;
}
}
customElements.define("list-item", ListItem);
customElements.define("my-list", List);
</script>
<my-list>
<list-item></list-item>
<list-item></list-item>
<list-item></list-item>
</my-list>
这是结果：
<my-list>
<div class="list"></div>
<list-item><div>ListItem</div></list-item>
<list-item><div>ListItem</div></list-item>
<list-item><div>ListItem</div></list-item>
</my-list>
我本来期望的是以下内容：
<my-list>
<div class="list">
<list-item><div>ListItem</div></list-item>
<list-item><div>ListItem</div></list-item>
<list-item><div>ListItem</div></list-item>
</div>
</my-list>
你可以在这里尝试一下。
我正在创建一个应该嵌入到多个外部站点上的角度元素。
嵌入过程将只是对已编译脚本和表示该元素的 DOM 元素的引用：
<html>
<head>
<script src="element.js"></script>
</head>
<body>
<element></element>
</body>
</html>
但问题是该元素使用了一些 .png、.svg、.gif 和 .jpg 格式的资源。
当然，在不同站点上使用的编译元素无法引用这些资源。
角度元素的文档非常有限，甚至 Angular Docs 也没有对此进行任何说明。
实现这一目标的最佳方法是什么？我见过一些人将资源转换为数据并以这种方式呈现。
我创建了一个 Web Component 类来扩展div，并用于customElements.define()定义它：
class Resize_Div extends HTMLDivElement {
constructor(){
super();
this.cpos = [0,0];
<etc.>
}
connectedCallback() {
console.log( 'connected' );
}
<etc.>
}
customElements.define('resize-div', Resize_Div, { extends:'div'} );
如果我在 html 中测试，as <div is:'resize-div'> </div>，它工作正常。
现在我想使用 createElement 以编程方式创建一个实例，使用声明is 的选项，如下所示：
let dv = document.createElement('ul', { is: 'resize-div' })
浏览器开发者工具显示已创建，outerHTML如下：
outerHTML: "<div is="resize-div"></div>"
如文档所述，“新元素[具有]一个is属性，其值是自定义元素的标签名称。”
现在我设置 id、class 和 style，并通过以下方式将新元素附加到 DOM：
document.getElementById( parent ).appendChild( dv );
现在再看一遍：is属性被剥离，它不再充当 Web 组件：
attributes: NamedNodeMap
0: …规范说：
但是，请注意，connectedCallback 可以被多次调用，因此任何真正一次性的初始化工作都需要一个防护来防止它运行两次。
这是什么意思？是不是说在调用connectedCallback之前可以（由浏览器引擎）调用多次？disconnectedCallback
如果总是有一个connectedCallback对应一个disconnectedCallback，那么这种说法就毫无意义了。
显然，我会清理在connectedCallback中创建的任何内容disconnectedCallback，因此我不会让事情“运行两次”。
我正在学习教程：https : //alligator.io/web-components/composing-slots-named-slots/
我正在遵循以下建议：如何通过 Chrome 扩展程序附加 HTML 标记而不会将主机页面的样式泄漏到附加元素？
由于某种原因得到一个错误：
window.customElements.define('my-info-box', MyInfoBox);
myScript.js:82 Uncaught TypeError: Cannot read property 'define' of null
根据我是否设置断点，它的行为会有所不同：https : //en.wikipedia.org/wiki/Heisenbug
你碰巧知道吗？
我认为这可能是时间问题，所以尝试setTimeout以及document.addEventListener('DOMContentLoaded', fireContentLoadedEvent);在回调中做魔术......
let shadowDomMarkup =
`
<my-info-box>
<span slot="top">I'm in the shadow DOM injected by extension</span>
</my-info-box>
`;
$(shadowDomMarkup).prependTo("body");
(function() {
const template = document.createElement('template');
template.innerHTML = `
<style>
:host {
display: block;
background: red;
border: 10px dashed black;
}
</style>
<div>
<slot name="top"></slot> …google-chrome google-chrome-extension shadow-dom custom-element
custom-element ×10
javascript ×5
html ×2
angular ×1
appendchild ×1
bind ×1
dom ×1
events ×1
onclick ×1
resources ×1
shadow-dom ×1
typescript ×1
x-tag ×1