When can I use `querySelector` on `shadowRoot`? - web-component

When can I use querySelector on shadwoRoot?
I tried it in connectedCallback, but it failed.

You should do this in firstUpdated(). That is when the shadowRoot is fully populated.

Related

How to setFocus on Apache Royale Jewel Button?

All is in the title...
I would like to trigger at application startup this definition in css :
.jewel.button:focus
But I don't see any setFocus or focus property on j:Button
Could you tell me how to do ? Thanks
Regards
UPDATE: This is no longer right. Recently SetFocus bead was removed and StyledUIBase got "setFocus" method. Use it instead of the code below.
Use the Basic bead SetFocusrecenlty added:
<j:Button text="Hello!" emphasis="secondary">
<j:beads>
<js:SetFocus enableFocus="true"/>
</j:beads>
</j:Button>

Polymer.dart: How to set read-only property to read-write attribute?

I have a polymer component(lets call it component-one) which exposes an attribute value. I want to use this in another polymer component which has an Observable list property called data. I want to do the following:
<template repeat="{{obj in data}}">
<component-one value="{{obj}}"></component-one>
</template>
But it generates error saying that there is no "obj=" method.
Can somebody let me know how to data-bind a read-only property to a read-write attribute?
Thanks for your time!
Seems you are running into this bug https://code.google.com/p/dart/issues/detail?id=17981. This bug seems to be fixes for about 6 weeks.
You should check that you use a recent Dart version and a recent Polymer package.
If this doesn't help please add a comment.

Detecting for -webkit-apperance with Modernizr

Can anyone tell me how to detect -webkit-appearance, moz-apperance, or appearance using Modernizr?
I have custom selects, and checkboxes that use these and I need to ensure the additional styles are not applied on those browser that dont support these properties.
Thanks
Just use Modernizr.testProp() method:
Modernizr.testProp('webkitAppearance');
And with this check you can write your own Modernizr test using Modernizr.addTest():
Modernizr.addTest('webkit-appearance', function() {
return Modernizr.testProp('webkitAppearance');
});
I'm pretty certain that Modernizr doesn't include a detection routine for this feature yet -- it's just too new.
However, as it's a CSS property, you should be able to detect it fairly simply for yourself without needing to invoke modernizr.
This page details how to do a quick check to detect if a CSS property is available.
Simply check whether the property exists in the style property of any given DOM element. If the property is supported, it will be in the DOM, even if it isn't actually set to anything.
Hope that helps.

drupal - jQuery, can't select any elements via jQuery

I have a form and I add a js file via drupal_add_js() in the init code of the module.
I see the first debug message, but I can't seem to select any items from the document. I just get the jQuery object returned.
But when I add the same line into the firebug, it works.
console.log('called => init()');
console.log(jQuery('#quiz-form').find('#edit-next'));
If you're trying to retrieve the value from your form element, try:
console.log(jQuery('#quiz-form').find('#edit-next').val());
Getting the jQuery object as return is perfectly fine as methods like find actually return a jQuery object. You should check the length of the jQuery object that you are getting as return i.e. console.log(jQuery('#quiz-form').find('#edit-next').length);. If the length is zero, then of course the elements are not being found. In that case you should make sure that your JS code is being called after the DOM is ready i.e. you should either wrap your code with jQuery(document).ready or use Drupal behaviors.
I figured it out by chance. The jQuery object was trying to find the selected object before the page was initialized.
I was thinking drupal_add_js in the init module was enough.
BUt I had to wrap the jquery code in the Dom Ready function as well... as we always are supposed to do.

Sizzle Selector Engine Error

I'm attempting to use jQuery and ASP.NET. I am pasting the server control "ClientID" into a jQuery selector and I'm getting an error (with no error text) from the Sizzle selector engine.
My selector looks like this...
$('#ctl00_ContentPlaceHolder1__phProfileHeader__filProfileImage')
Is it the length that might be causing the problem? I've re-checked the control ID several times in the client code and everything seems fine. So what's the deal? I use the same strategy in several other places and they work fine.
That's pretty strange. Something that I have seen used when dealing with those long ASP.NET generated IDs is jQuery's content filters. For example, this one will look for element's who's id attribute ends with "filProfileImage":
$("[id$=filProfileImage]")
Try that and see if it helps.
http://docs.jquery.com/Selectors/attributeEndsWith#attributevalue
Are you sure the error is happening in Sizzle?
I would check to see what you get with
document.getElementBy('ctl00_ContentPlaceHolder1__phProfileHeader__filProfileImage');
just to make sure the dom is available. Not that sizzle should care, but...
Please post your error message.
Cheers
I don't get any errors. I don't think is jQuery related. Can you pass the error?
$(document).ready( function(){
console.log( $('#ctl00_ContentPlaceHolder1__phProfileHeader__filProfileImage'));
});
Returns the div.

Resources