CODEWITHSUNDEEP
dartdart-html
user1492051
user1492051

Reputation: 906

Extending input element

i extended the html InputElement as the following, and tried to render it with in another custom element

import 'dart:html';

void main() {
  document.registerElement('x-editor', EditorBase,extendsTag:'input');
  document.registerElement('x-item', Item);
}

class EditorBase extends InputElement{
  EditorBase.created():super.created();
}

class Item extends HtmlElement{

  Item.created():super.created(){
    this.createShadowRoot();
    String template = '<input  is="x-editor"></input>'
                      '<input  is="x-editor"></input>';
    this.shadowRoot.appendHtml(template);
  }
}

in my html i have

<x-item></x-item>

when i run chromium writes 2 Removing disallowed type extension <INPUT is="x-editor">

Upvotes: 1

Views: 186

Answers (2)

kelegorm
kelegorm

Reputation: 975

I don't really understand what you need. But I wanna share for you one more option to extend input element:

import 'dart:html';
import 'dart:html_common';
import 'package:web_components/interop.dart';

class NumericInput extends InputElement {

  NumericInput.created() : super.created() { print('created!');}

  @override
  void attached() {
    super.attached();
    print('Hi, it's is a NumericInput here!');
  }
}

//call it in `main()`
registerNumericInput() => document.registerElement('x-input', NumericInput, extendsTag: 'input');

Somewhere in HTML:

<input is="x-input" value="{{number}}">

You don't need to make a shadowDom. But I don't know how it's useful for you.

Upvotes: 1

user1492051
user1492051

Reputation: 906

this did it , i don't know why though

class Item extends HtmlElement{

  final NodeValidatorBuilder _htmlValidator=new NodeValidatorBuilder.common()
    ..allowElement('input', attributes: ['is']);


  Item.created():super.created(){
    this.createShadowRoot();
    String template = '<input  is="x-editor"></input>'
                      '<input  is="x-editor"></input>';
    this.shadowRoot.setInnerHtml(template,validator:_htmlValidator);
  }
}

Upvotes: 1

Related Questions