ES2015 / JS6 中的自定义元素 [重复]
Posted
技术标签:
【中文标题】ES2015 / JS6 中的自定义元素 [重复]【英文标题】：Custom Elements in ES2015 / JS6 [duplicate] 【发布时间】：2016-02-29 23:53:02 【问题描述】：什么是 ES205 / JS6 方式，制作一个相当于 this DartLang 制作的自定义元素
【问题讨论】：
到目前为止你发现了什么？ @CodeiSir 我找到了这个，但没有抓住重点github.com/domenic/webcomponents/blob/… @CodeiSir，这个网站对我很有帮助，我在下面发布了我的解决方案：code-labs.io/codelabs/chrome-es2015/… @Blazemonger 这个问题与您正在考虑的问题不重复，请重新阅读它们以及解决每个问题所使用的技术 也许您应该花一些时间解释您的答案，然后在您的问题中提供详细信息以说明它们与其他问题的不同之处。实际上，您只是一遍又一遍地粘贴看起来相似的代码，看起来像是在努力提高分数。 【参考方案1】：我能够做到，以下是我为有兴趣的人所做的：
"use strict";
// DART: class SaveBtn extends htmlElement static final tag = 'save-button';
// ES2015 / JS6
class SaveBtn extends HTMLElement
// DART: factory SaveBtn([String name]) => (new Element.tag(tag) as SaveBtn)..name = name;
// ES2015 / JS6
constructor()
super();
// DART: SaveBtn.created() : super.created()
// ES2015 / JS6
createdCallback()
// Create a Shadow Root, DART & ES2015
var shadow = this.createShadowRoot();
// Create a standard element and set it's attributes.
// DART: innerButton = new ButtonElement()..id='btn';
// ES2015 / JS6
var innerButton = document.createElement('button');
innerButton.id='btn';
innerButton.addEventListener('click',() => console.log('The button had been clicked'));
shadow.appendChild(innerButton);
// DART: void attached()
// ES2015 / JS6
attachedCallback()
console.log(this.dataset);
console.log(this.textContent);
this.shadowRoot.querySelector('#btn').textContent = this.textContent != '' ? this.textContent : this.dataset['text'];
detachedCallback()
attributeChangedCallback(textContent)
set text(v)
this.textContent = v;
get text()
return this.textContent;
var MySaveBtn = document.registerElement("save-button", SaveBtn);
var x = new MySaveBtn;
x.text = 'test';
console.log(x.text);
document.querySelector('#placeholder').appendChild(x);
我使用的 HTML 文件是：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ES2015 / JS6 Custom Elements</title>
<script src="default.js" type="text/javascript"></script>
</head>
<body>
Here is some non-custom stuff.
<div id="placeholder"><p>Please wait, loading cool things<p></div>
<save-button data-text='click this'></save-button>
</body>
</html>
不使用 SHADOWROOT 的另一种解决方法是here
【讨论】：
以上是关于ES2015 / JS6 中的自定义元素 [重复]的主要内容，如果未能解决你的问题，请参考以下文章
专家专栏覃涛 | ECMAScript 2015(ES6)的若干特性及性能对比
AngularJS ng-repeat 与表格内的自定义元素呈现奇怪