I have defined the css property at document level:
<style is="custom-style">
:root {
--my-color: black;
}
</style>
How can I get the value of --my-color from the dart code inside a polymer element? I have tried to use customStyle['--my-color'] but it returns null.
This seems not to be possible on page-level style is="custom-style", only for CSS variables declared int style tags within Polymer elements.
See also customStyle in http://polymer.github.io/polymer/
An element's style properties can be directly modified by setting key-value pairs in customStyle on the element (analogous to setting style) and then calling updateStyles().
"An element's style properties ..."
It's possible, like this:
Polymer({
is: 'my-el',
attached: function() {
console.log(this.getComputedStyleValue('--my-color'));
}
});
Note i used attached callback instead of ready
Related
I'm reading the react JS documentation and came across this:
Specifying Attributes with JSX:
You may use quotes to specify string literals as attributes:
const element = <div tabIndex="0"></div>;
I'm fairly comfortable with javascript but I'm not quite sure what the documentation means by "attributes". I know about object properties but this looks like a simple variable.
What exactly is a react js attribute if it is different from a property?
html elements have both attributes and properties
there are a few different scenarios for how they relate to each other. There doesn't necessarily have to be both an attribute or property for each value set on an element.
1. attributes
attributes can be set in html
<a id="mylink" href=""/>
where href is an attribute
or attributes can be set by using the set attribute method of an element
document.getElementById("mylink").setAttribute("href", "")
and read using
document.getElementById("mylink").getAttribute("href")
2. properties
properties can be set and read by retrieving the element as well
document.getElementById("mylink").href = ""
where href is a property
when they are set the first way, you are setting the attribute, the second sets the property.
Usually the underlying element attribute and property are
automatically synchronized, sometimes they are not.
Sometimes there is no matching attribute or property,
only one or the other exists.
Attributes and properties are part of native html elements, which React provides additional support and abstractions around.
Custom React components (such as <MyComponent prop=""/> or <MyComponent prop={someVar}/>), which you create yourself, accept props using the same syntax. The word props in this context refers purely to React props. React custom component props are just plain javascript values passed into your component. These custom components don't get added to the page. They are used to organize and render actual html elements.
When mounting a native component inside of a custom component (such as <div id=""/> or <div id={someVar}/>), the React library sets the underlying html attribute on the native browser element.
So there are two things to keep in mind here
html element attributes verse html element properties.
custom element props are neither of those, but setting a prop on a JSX
native element such as a div, set's the generated element's
attribute.
Now that's been established, the documentation above is saying: if you want to set an attribute value to a string you can use that specific syntax. That syntax only works for setting attribute values to strings.
You can use either:
<div id="myid"/>
or
<div id={'myid'} />
to set a string attribute value. They're probably just pointing out the syntax differences.
if you do:
<div tabIndex="0"/>
the value of tabIndex is the string 0 not the number zero
verses this:
<div tabIndex={0} />
which will pass the number zero to the tabindex attribute of the underlying html element
To me if we pass any parameter in function component then what we diclare in html is properties.But if you use (className/style/etc...) directecly in html then it will be attributes.
Working on a pre existing React JS project and the className attribute does not render in the DOM what is defined.
For example - here is what code looks like in the project:
<div className={styles.intro_inner}></div>
Here is the output in the DOM:
I'm expecting the class name "intro_inner" to appear within the DOM.
Within JSX, the syntax attribute={variable} on a component means that the attribute will be set with the value of the given variable, not it's name. I would assume that your code has an object named styles which has an attribute named intro_inner whose value is some random mash of characters that you see output in the inspector.
If you want the class to be set as "intro_inner" then you need to set it as a string, not a variable. The syntax for that would be className="intro_inner".
when the text attribute is set to
text-overflow: ellipsis;
the overflowed text will be displayed as "XX..." (see screenshot for more )
how can I find the overflowed text/element in webdriver?
thanks in advance
Screenshot of Overflowed text
Probably the easiest/best way to do this is to use the JS innerText property, e.g.
driver.findElement(lcoator).getAttribute("innerText");
If I remember correctly, some browsers use textContent instead.
driver.findElement(lcoator).getAttribute("textContent");
This should get you the full text inside that element.
You could also pull innerHTML and parse it (if needed) or remove the text-overflow style from the element but these are harder/more complicated.
In case you have jQuery available in your project, you can write your own selector:
$.expr[':'].truncated = function (e) {
// you *might* want to check if css property "text-overflow"
// is set to "ellipsis" as well, to filter other truncations:
return e.offsetWidth < e.scrollWidth;
};
and go from there:
items = $('.your-selector:truncated');
(heavily based on the answers here)
I am using a CSS selector my-invalid to indicate invalid elements.
.my_invalid{
border-color:#ffdddd;
background-color:#ffdddd;
background-image: none;
}
I would like to control when the elements use the invalid styling by modifying the selector. Is there a way to modify the actual selector properties in angular? Something along the lines of:
var my_invalid_props = CSS.find("my_invalid").properties;
...
CSS.find("my_invalid").properties = [];
....
CSS.find("my_invalid").properties = my_invalid_props;
I am trying to learn React. Why can you not use style inside of a return inside of a component?
The Error:
The style prop expects a mapping from style properties to values,
not a string. For example, style={{marginRight: spacing + 'em'}} when
using JSX. This DOM node was rendered by Home.
<div className="single_slide" style="background-image: url(../images/WinterCalling_2016.jpg);">
I have also tried this also:
<div className="single_slide" style={{background-image: 'url(../images/WinterCalling_2016.jpg)'}}>
or
<div className="single_slide" style={{background-image: url(../images/WinterCalling_2016.jpg)}}>
Any help with this syntax would be greatly appreciated. Other people posted they change style to say styles but that did not seem to work either.
From DOC:
In React, inline styles are not specified as a string. Instead they
are specified with an object whose key is the camelCased version of
the style name, and whose value is the style's value, usually a
string.
So instead of background-image use backgroundImage.
For example:
padding-top ---> paddingTop
padding-left ---> paddingLeft
margin-right ---> marginRight
...
How to specify the inline style?
We need to pass a object to style attribute which will contains all the values in form of key-value pair.
Like this:
<div
style={{
backgroundImage: 'url(../images/WinterCalling_2016.jpg)',
marginTop: 20}}
>
Update:
We can use template literals to pass a variable inside url, like this:
<div style={{backgroundImage: `url(${image1})`}}>
React follow the camelcase convention so you have to change background-image to backgroundImage instead.
For more info, the documentation is here.
If you want to use the style property, please provide a JavaScript dictionary object. However, the style key for background-image is backgroundImage.
<div
className="single_slide"
style={{backgroundImage: 'url(../images/WinterCalling_2016.jpg)'}}
>
Did you try wrapping background-image in quotes?
i.e.
<div className="single_slide" style={{'background-image': 'url(../images/WinterCalling_2016.jpg)'}}></div>
This seems to work for me (at least, when testing with the background-color property; I don't have an image on hand to test with for background-image)
or you can use '!important' with this ....like "background-color:red!important"
Note: And call your js in footer .Because sometimes js reacts first when we call that in header.so call your 'js' in footer.
<div class="yourclass" style="background-color:red;" >your div</div>
style="background-color:red;"