javascript - document.registerElement extending HTMLInputElement prototype while using custom tag name to avoid implicit browser style -

-

my goal two-fold:

  • display html element keeps track of 'checked' state , triggers 'change' events without having manually implement code myself.

  • not fight browser's implicit styling of element -webkit-appearance: none , more fussing.

i need support current, stable channel of google chrome. such, not have concern compatibility non-modern browsers.

i've approached problem using document.registerelement. method, register new tag, custom-checkbox, , inform browser tag inherit input.

from there, need setup fact input's type checkbox. so, set type in createdcallback method ran when html element created.

this code has issues:

  • it works when not use custom tag , instead leverage is property inform browser input 'is' custom-checkbox. however, using <input> tag causes browser take on styling element. not wish have happen.

  • when using custom tag, createdcallback method not ran. such, element not setup fact checkbox , not fire 'change' events when clicked.

what missing?

var proto = object.create(htmlinputelement.prototype);  proto.createdcallback = function() {    console.log('createdcallback has ran for: ', this);    this.type = "checkbox";  };    document.registerelement("custom-checkbox", {    prototype: proto,    extends: 'input'  });    $('.custom-checkbox').change(function() {    console.log('change event handler has ran for:', this);  });
.custom-checkbox {    width: 100px;    height: 100px;    background-color: red;    display: inline-block;  }
<custom-checkbox class="custom-checkbox"></custom-checkbox>    <input is='custom-checkbox' class="custom-checkbox">

i can duplicate issue createdcallback method not fire when inserting <custom-element> tag onto page declared using html. i'm using chrome version 39.0.2171.99

i believe because when <custom-element> rendered, event listener createcallback has not binded.

bear in mind custom elements not yet defined standard (see this)

however, using polymer solved issue me, using custom tags in html fire polymer refers create event/callback.

i suggest use polymer, has better browser support to.


Comments

Post a Comment

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

-
i have write down code showing error ma not getting it: please help: showing mat not numerical tuple: import cv import cv2 capture = cv2.videocapture("j.3gp") while(1): _, frame1 = capture.read() grayimage1 = cv2.cvtcolor(frame1, cv2.color_bgr2gray) _, frame2 = capture.read() grayimage2 = cv2.cvtcolor(frame2, cv2.color_bgr2gray) differenceimage = cv2.absdiff(grayimage1,grayimage2) thresholdimage = cv2.threshold(differenceimage,25,255,cv2.thresh_binary) cv2.imshow("difference image", differenceimage) cv2.imshow("threshold image", thresholdimage) cv2.imshow("image", frame1) k = cv2.waitkey(30) & 0xff error arising : ----------------------------------------------------------------------------------------- traceback (most recent call last): file "desk.py", line 15, in <module> cv2.imshow("threshold image", thresholdimage) typeerror: mat not numerical tuple ...
Read more

c# - MSAA finds controls UI Automation doesn't -

-
i'm working on automating windows application. i'm using teststack white framework. i've hit problem. program has 'window' object cannot see inside of. white shows no controls inside of it. inspect.exe shows no controls inside of either when running in ui automation mode. if switch inspect msaa see controls inside fine. there anyway me use msaa c# handle on these controls? if can identify msaa functions need, can use p/invoke call them c#. here's example article doing msaa: http://www.codeproject.com/articles/38906/ui-automation-using-microsoft-active-accessibility also, pinvoke.net can used identify iaccessible (msaa) functions: http://www.pinvoke.net/search.aspx?search=iaccessible&namespace=[all] here's answer along lines: msaa com-based? finally, alternative p/invoke, might able use tlbimp.exe create wrapper assembly oleacc.dll, , access msaa functions through it. i'm not sure if works msaa, it's worth try. as e...
Read more

wordpress - .htaccess: RewriteRule: bad flag delimiters -

-
pulling hair out on one. have following .htaccess file custom redirects in addition wordpress's default settings. when tested on local wamp server worked fine after moving production i'm not getting rewriterule: bad flag delimiters error in server log , after while site goes down internal server error any appreciated. in advance! <ifmodule mod_rewrite.c> rewriteengine on rewritebase / rewriterule ^rockford_weddings___welcome\.html$ /wedding/ [r=301,l] rewriterule ^blog/?$ /journal/ [r=301,l] rewriterule ^blog/(.*)$ /$1 [r=301,l] rewriterule ^portraitinvestment/?$ /portraitinvestment\.pdf [r=301,l] rewriterule ^weddinginvestment/?$ /weddinginvestment\.pdf [r=301,l] rewriterule ^holidaycards2014/?$ /holidaycards2014\.pdf [r=301,l] </ifmodule> # begin wordpress <ifmodule mod_rewrite.c> rewriteengine on rewritebase / rewriterule ^index\.php$ - [l] rewritecond %{request_filename} !-f rewritecond %{request_filename} !-d rewriterule . /index.php [l] </...
Read more