Пользовательские элементы в ES2015/JS6

-2

Каков путь ES205/JS6, чтобы сделать пользовательский элемент, эквивалентный this одного сделанного DartLangПользовательские элементы в ES2015/JS6

источник

2015-11-26 Hasan A Yousef

Что вы нашли до сих пор? – CoderPi

@CodeiSir Я нашел это, но не поймал точку https://github.com/domenic/webcomponents/blob/constructor-dmitry-revisions/proposals/Constructor-Dmitry.md –

@CodeiSir, этот сайт мне был полезен, и я разместил решение ниже: https://www.code-labs.io/codelabs/chrome-es2015/index.html?index=..%2F..%2Fchrome-dev-summit&viewga=UA-41980257-1# 0 –

Я был в состоянии сделать это, ниже, как я сделал это для тех, кто заинтересованы, чтобы сделать так:

 "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

источник

2015-11-27 20:55:22

Пользовательские элементы в ES2015/JS6

ответ

Смежные вопросы