javascript - Is it possible to access Shadow DOM elements through the parent document? -


this question more aimed @ user-created shadow dom elements, accessibility i'll use date input type question:

say example have date input on page. couple of bits edited out, shadow dom markup (using chrome) looks like:

<input type="date">     #document-fragment         <div pseudo="-webkit-datetime-edit">             <div pseudo="-webkit-datetime-edit-fields-wrapper">                 <span role="spinbutton">dd</span>                 <div pseudo="-webkit-datetime-edit-text">/</div>                 <span role="spinbutton">mm</span>                 <div pseudo="-webkit-datetime-edit-text">/</div>                 <span role="spinbutton">yyyy</span>             </div>         </div>         <div></div>         <div pseudo="-webkit-calendar-picker-indicator"></div>

the methods , properties associated date input not appear reference shadow dom @ (jsfiddle), wondering how (if @ all) can these shadow dom elements accessed?

int32_t right in shadow dom, definition, way fill node dom want hide external sources (encapsulation). point component author choose parts exposed outside css or javascript , not.

unfortunately, cannot create public javascript interface shadow dom without using bleeding-edge spec called custom elements. if choose that, it's simple adding custom public methods element's prototype. these can access internals of shadow dom (see third example here).

you can, however, expose hooks css access internals of shadow dom without using custom elements. there 2 ways that:

  1. pseudo-elements
  2. css variables

pseudo-elements

chrome , firefox expose parts of shadow dom css through special pseudo-elements. here's example of date input addition of css rule applies numerical part of date field through use of chrome-provided -webkit-datetime-edit pseudo-element.

here's partial list of available webkit pseudo-elements. can enable show shadow dom option in devtools , attributes named pseudo.

component authors can create own pseudo-elements expose parts of shadow dom (see 2nd example here).

css variables

an better way use css variables, can enable enable experimental webkit features in about:flags in chrome. check out this fiddle uses css variables communicate shadow dom color should use "theme."


Comments

Post a Comment

Popular posts from this blog

SPSS keyboard combination alters encoding -

my question not have programming practical issue on spss. accident keyword combination cannot remember because did not intend press changed encoding in spss , text in data in different language english shown small boxes. nevertheless, when kind of analysis performed different language text shown in output. does know reason? tried change encoding did not produce result. first, @ edit > options , see whether setting unicode or locale. might fix it. if have text in multiple languages, want unicode. otherwise, may have specific locale set wrong. can change set locale, need know locale want use.
Read more

Add new record to the table by click on the button in Microsoft Access -

in ms access form want implement separate button, adds new record table. in order added button , attached button event: private sub btnaddrec_click() refresh codecontextobject on error resume next docmd.gotorecord , , acnewrec if err.number <> 0 btnaddrec.enabled = false end if end end sub everything ok when open window , click btnaddrec button, problem when first of perform navigation through existed records , after click on button. got runtime error: 2105: «you can't go specified record. may @ end of recordset» . how solve issue, need have ability add new record on click on specific button, no matter, have walked or not walked through records before. thanks. i created simple form field call description (and autonumber) , created button code follows click event. filled number of records , navigated through them, clicked addnewrec button. form navigated new record without issues. able click addnewrec button directly after
Read more

CSS3 Transition to highlight new elements created in JQuery -

i want use css3 color transition apply highlight-fading color effect (yellow transparent) new elements appended markup using jquery. css #content div { background-color:transparent; -moz-transition:background-color 2s; -webkit-transition:background-color 2s; -o-transition:background-color 2s; transition:background-color 2s; } #content div.new { background-color:yellow; } html <div id="content"></div> <a id="add-element" href="#">add new element</a> js $('#add-element').click(function() { var newelement = $('<div class="new">new element</div>'); $('#content').append(newelement); newelement.removeclass('new'); }); when click link, new element created. class "new" (background color yellow) , it's appended html markup. should able remove "new" class trigger background color transition transparent (or whate
Read more