extendTag在達特定製元素

Question

從在JavaScript this link，海關元件延伸按鈕被製成爲：

var MegaButton = document.registerElement('mega-button', { 
    prototype: Object.create(HTMLButtonElement.prototype), 
    extends: 'button' 
}); 

<button is="mega-button"> 

我試圖使所述使用鏢相同，通過這樣的代碼：

class MegaButton extends ButtonElement { 
static final tag = 'mega-button'; 
factory MegaButton()=>new Element.tag('button', tag); 
    MegaButton.created() : super.created() { 
     var shadow = this.createShadowRoot(); 
     shadow.text='save'; 
    } 
} 
document.registerElement(MegaButton.tag, MegaButton); 

在html文件

<button is="mega-button"></button> 
    <mega-button>click me</mega-button> 

但得到了s錯誤：

Exception: Unsupported operation: Class must provide extendsTag if base native class is not HTMLElement 

任何幫助請。感謝

Answer 1

document.registerElement應該是這樣的：

document.registerElement(MegaButton.tag, MegaButton, extendsTag: 'button'); 

=> new Element.tag('button', tag); 

也看到Custom Polymer element extending AElement in Dart

Answer 2

下面的代碼與我的工作完美：

class SaveBtn extends HtmlElement { 
     static final tag = 'save-button'; 
     factory SaveBtn()=>new Element.tag(tag); 

    SaveBtn.created() : super.created() { 
    // Create a Shadow Root 
    var shadow = this.createShadowRoot(); 
    // Create a standard element and set it's attributes. 
    var btn = new ButtonElement() 
    ..style.height= '20px' 
    ..style.width= '50px' 
    ..style.color= '#FF8F66' 
    ..style.border='1px solid #BCC1C8' 
    ..style.background='#F1F4FB' 
    ..style.borderRadius='5px' 
    ..style.fontFamily='openSansItalic' 
    ..style.fontSize='12px' 
    ..style.padding='0px 6px' 
    ..style.marginLeft='0.1em' 
    ..style.borderBeforeStyle='solid' 
    ..style.borderWidth='1px' 
    ..style.borderColor='transparent' 
    ..style.marginBottom='2px' 
    ..style.borderBottom='1px solid #D1DBE9'; 

    btn.text= this.getAttribute('data-name'); 

    btn.onMouseDown.listen((e){ 
     btn..style.color="#333" 
    ..style.background='#FF8F66'; 
    }); 
    btn.onMouseUp.listen((e){ 
    btn..style.color="#FF8F66" 
    ..style.background='#F1F4FB' 
    ..style.outline='none'; // remove the focus outline/glur 
    }); 
    btn.onMouseEnter.listen((e)=> btn..style.boxShadow='0px 0px 5px #888888'); 
    btn.onMouseLeave.listen((e)=> btn..style.boxShadow='0px 0px 0px'); 

    if(btn.disabled==true){ 
    btn..style.color="gray"; 
    } 
    shadow.nodes.add(btn); 

    Element launchElement(){ 
    return (shadow); 
    } 

    } 
} 

自定義元素註冊：

document.registerElement(SaveBtn.tag, SaveBtn); 

，並在HTML文件中，我使用：

<save-button data-name='save orders'></save-button>