I have tried to bind style attribute on a div inside my-element to defined property, however the binding doesn't work.
<div> hostColor = <span style="{{hostStyle}}">{{hostColor}}</span></div>
When I check the inspector, I could see that style attribute has been removed from the span.
As of Polymer 1.0, there is new way to bind to native element attributes
so
<span style="{{hostStyle}}">{{hostColor}}</span>
will become:
<span style$="{{hostStyle}}">{{hostColor}}</span>
Related
Heyo, I'm trying to understand how and when text interpolation works in Angular. It seems to remove certain combinations. Let me give you a few examples:
<img src="{{'test'}}"> //works
<span src="{{'test'}}"></span> //gets removed
<span data-test="test"></span> //works, duh
<span data-test="{{'test'}}"></span> //gets removed
<span [attr.data-test]="'test'"></span> //works
Just to be clear, the DOM will contain all the img and span elements but they won't always have the attributes I defined. Angular just throws some away.
My theory is the following: text interpolation for HTML attributes only works for attributes inserted according to HTML spec. Since <img> supports the src attribute, I can use text interpolation there. <span> doesn't, so it gets removed there. But there's nothing related to this in the docs afaik. So I can't really be sure. How does it work and when does it not?
Edit: the background to my question is that I want to use {{}} as often as possible over attribute binding cause I think it looks nicer. Though I neither have an idea which one performs better nor why text interpolation doesn't always work.
Angular and binding check if the property exists in the element, if it is null or undefined is removed.
Let see each case:
<img src="{{'test'}}"> WORKS because the attribute src is part of the img element.
<span src="{{'test'}}"></span> REMOVED, the attribute src is not part of span and resolves to null or undefined, and angular removes the attribute.
<span data-test="test"></span> WORKS, because the data-test is a standard way to add property and not use binding.
<span data-test="{{'test'}}"></span> REMOVED because the binding check the data property is not part of span, angular check the data-test attribute is not valid and is removed.
<span [attr.data-test]="'test'"></span> WORKS it is the way as angular register the custom attribute attr-data-test and keep and assign the value.
RECAP
For binding attributes, use attribute binding to bind properties and custom attributes.
<img [src]="path"/>
For custom attributes uses:
<img [attr.data-nice]="hello"/>
Feel free to read more https://angular.io/guide/attribute-binding
I need to put the "autofocus" attributes on hyperlink elements like this:
my link
It seems that "autofocus" works only on input elements.
But the focus event works on hyperlink elements.
Maybe I need to change something on my hyperlink elements?
According to https://www.w3schools.com/tags/att_autofocus.asp, the <a> tag cannot have an "autofocus" attribute.
However, by using jQuery, it is possible:
<script>
document.getElementById("myId").focus();
</script>
I was looking at some Polymer code (link) and stumbled upon something new to me: a dollar sign $ in an html attribute name e.g.
<div class="item" wide-layout$="{{wide}}">
Also, a CSS selector is used:
.item[wide-layout] .title { ... }
How is the $ sign interpreted in the element attribute ?
Thanks for your time folks!
Using $ on the element binds a property to an attribute. You can read more here.
wide in your scenario is probably a Boolean property on the element.
When wide = true, a wide-layout DOM attribute will be added to the element so it can be targeted via CSS.
The dollar sign tells Polymer that some code will change the attribute, may it be class or any specific property on a Polymer element.
The code can be a function or a simple variable.
Example:
<shopping-cart class$="[[colorDependingOnItem(onSale, typeOfBrand)]] row-element">
So the class can now change dynamically depending on what the method colorDependingOnItem returns, based on the two properties onSale and typeOfBrand.
I have a contenteditable=true div element to enter html input text. It is a required field. Can I use asp-for attribute for this element?
<div asp-for="Comment" contenteditable="true"></div>
<span asp-validation-for="Comment" class="text-danger"></span>
Appreciate any comments
The contenteditable attribute does not magically make a random element a form field. You'd need to use JS to either track changes and update an input/textarea (which you'd add asp-for to) or use JS to post the div contents via AJAX.
From Polymer's Anatomy of a data binding
To bind to a property, use the property name in attribute form (dash-case not camelCase), as described in Property name to attribute name mapping:
<my-element my-property="{{hostProperty}}">
To bind to an attribute instead, use the attribute name followed by $:
<a href$="{{hostProperty}}">
But in my code, <div style="background-image: [[getImage(index)]]" class="image-show"></div> works perfectly without $.
Why is this when style is a attribute and not a property(there is no style property defined in the Polymer({}) constructor). Am I working off of a side effect?
Style is a standard HTML attribute. The polymetric way to bind to a style is to use
<div style$="[[myStyle]]">
What you're doing is using a standard style tag with a data-bind to a style property.
On the page you linked, scroll down to the section labeled: Native properties that don't support property binding and you'll see the other attributes that you have to use $= with.