extendTag in Dart custom element

Question

from this link in javascript, customs element extending button is made as:

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

<button is="mega-button">

I tried making the same using dart, by this code:

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);

in the html file

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

but got this error:

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

any help pls. thanks

document.registerElement(MegaButton.tag, MegaButton); this is called in a separate function where I register all my custom elements. — Hasan A Yousef, Oct 11 '14 at 15:54

score 2 · Accepted Answer · edited May 23 '17 at 12:20

2

document.registerElement should look like:

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

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

see also Custom Polymer element extending AElement in Dart

edited May 23 '17 at 12:20

Community

1
1

answered Oct 11 '14 at 13:08

Günter Zöchbauer

623,577
216
2,003
1,567

did not work :( I do not want to use Polymer Custom element, just DART vanilla custom element. I adjusted the code in my question to reflect the code I've after your answer. is there some thing wrong in the item registration! – Hasan A Yousef Oct 11 '14 at 15:45
`Element.tag` is plain `dart:html`. – Günter Zöchbauer Oct 11 '14 at 15:47
half done :), error msg gone, the var megaBtn = new Element.tag('button', 'mega-button'); worked with me, but neither nor click me worked. – Hasan A Yousef Oct 11 '14 at 16:04
You definitely need to use ` – Günter Zöchbauer Oct 11 '14 at 16:06
not getting you, can you elaborate more pls, based on my adjusted code. thanks – Hasan A Yousef Oct 11 '14 at 16:13
` nor click me worked.` but you should define what you mean by `doesn't work`. Do you get an error message? Does the browser console print some message? Is nothing shown on the page? What does `inspect element` show? Does it show a `shadowRoot` element inside the tag you added? ... – Günter Zöchbauer Oct 11 '14 at 16:16
The browser does not show any thing on page, and no error msg in the console! The element inspector shows: Click me – Hasan A Yousef Oct 11 '14 at 18:24
I guess you need to add a `` tag to define where the content of the base class should be displayed. – Günter Zöchbauer Oct 11 '14 at 20:54
sorry, there was something wrong in my CSS that was preventing it from being visible, your answer is correct. thanks – Hasan A Yousef Oct 12 '14 at 08:22

score 0 · Answer 2 · edited Oct 12 '14 at 11:18

The below code worked perfectly with me:

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); 
    }

  }  
 }

the custom element registration:

document.registerElement(SaveBtn.tag, SaveBtn);

and in the html file, I used:

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

It is perfectly fine when you add your own answer when it contains additional information but when the information I provide leads to the solution I expect at least an upvote especially when it not a trivial question. — Günter Zöchbauer, Oct 12 '14 at 12:13

extendTag in Dart custom element

2 Answers2

Linked