Hello I am trying to use the Polymer attributes in css.
This is my code:
background: url( {{ image }} );
but it doesn't seem to work and outputs
url('%7B%7B%20image%20%7D%7D');
I don't think Polymer currently supports template binding within a <style> tag. You could instead use an inline style attribute on the element, or you could add an imageChanged handler and use the cssom to edit the stylesheet.
Related
w3schools say that ("All HTML elements can have attributes"). so, can br tag have attributes?
w3schools
You can still use br tag element to specific the id or any other css style, or custom attribute, and the modification you could use on either JavaScript or even on the size you broke the line.
Br tag supports global attributes and event attributes.
Global attributes :- https://www.w3schools.com/tags/ref_standardattributes.asp
Event attributes :- https://www.w3schools.com/tags/ref_eventattributes.asp
I have an ionic/angular app which autogenerates a custom tag element with a different _ngcontent attribute each time e.g.:
<tag _ngcontent-hgr-c2>...</tag> (1st refresh)
<tag _ngcontent-agj-c7>...</tag> (2nd refresh)
<tag _ngcontent-cfx-c5>...</tag> (3rd refresh)
Is there a way to use regex to target the custom tag attribute?
This didn't work:
tag[^=_ngcontent-] {
color: red !important;
}
Nor did just targetting the tag app e.g.:
tag {
color: red !important;
}
According to this answer, there is kind of regex in CSS, but it can be only applied to attribute's value, not to attribute itself. The W3C documentation says the same, so because Angular creates custom attributes, I'm afraid that it can be hard to achieve by regex.
If you want to style your tag like in the second example you can do it by defining its styles in global styles.scss. This is not the best solution, but should work.
This angular-blog article recently helped me understand the idea behind the style ecapsulation.
Unfortunately, there is no wildcarding support in CSS for attribute names.
If you have access to the application code which generates the custom tags, you should add classes to these elements (if the app supports it).
See also this question.
Eg: h:inputText will render a "input type='text'".
What jsf tag can render a "div" tag?
You can create a DIV component using the <h:panelGroup/>.
By default, the <h:panelGroup/> will generate a SPAN in the HTML code.
However, if you specify layout="block", then the component will be a DIV in the generated HTML code.
<h:panelGroup layout="block"/>
In JSF 2.2 it's possible to use passthrough elements:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:jsf="http://xmlns.jcp.org/jsf">
...
<div jsf:id="id1" />
...
</html>
The requirement is to have at least one attribute in the element using jsf namespace.
Apart from the <h:panelGroup> component (which comes as a bit of a surprise to me), you could use a <f:verbatim> tag with the escape parameter set to false to generate any mark-up you want. For example:
<f:verbatim escape="true">
<div id="blah"></div>
</f:verbatim>
Bear in mind it's a little less elegant than the panelGroup solution, as you have to generate this for both the start and end tags if you want to wrap any of your JSF code with the div tag.
Alternatively, all the major UI Frameworks have a div component tag, or you could write your own.
you can use myfaces tomahawk component
http://myfaces.apache.org/tomahawk-project/tomahawk12/tagdoc/t_div.html
I think we can you use verbatim tag, as in this tag we use any of the HTML tags
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.
I am new to polymer and keep seeing the "is" property, but never get a thorough explanation of it. Example :
<script>
Polymer({is: "some-property"})
</script>
or
<template is="dom-repeat"></template>
It seems to be a declaration of inheritance or the like and i sorta get it but would like to find a clear explanation.
Per the documentation:
To register a custom element, use the Polymer function, and pass in
the prototype for the new element. The prototype must have an is
property that specifies the HTML tag name for your custom element.
In this case, the
<template is="dom-repeat"></template>
is a specific custom element built-in to Polymer.js, which extends the native HTML template element.