It is documented that you can override Polymer's data binding default behavior of escaping HTML by using the injectBoundHTML method.
That's fine for some use cases, but is there a way to prevent HTML escaping for just standalone templates?
For example, I have a template in the <body> of my HTML page that looks like this; how can I prevent the HTML of the myHTMLsnippet value from being escaped?
<template is="auto-binding">
<div>{{myHTMLsnippet}}</div>
</template>
I was able to find a workaround by nesting the juicy-html element inside the auto-binding template.
<template is="auto-binding">
<div>
<template is="juicy-html" content="{{myHTMLsnippet}}"></template>
</div>
</template>
Related
I need some templated markup inside my blazor component.
This is how I'd typically define it (and read it via script):
<script type="text/template" id="foo">
...
</script>
However that gives:
Script tags should not be placed inside components because they cannot be updated dynamically. To fix this, move the script tag to the 'index.html' file or another static location. (RZ9992)
How can I suppress RZ9992 just for that one code block?
UPDATE: no that supposed dupe is far more complicated that what I wanted here. People who want a template tag will get the same error, but for a different problem.
Found the answer here.
<script type="text/template" id="foo" suppress-error="BL9992">
...
</script>
But there's an even better way, which according to caniuse is widely supported now:
<template id="foo">
...
</template>
However, note that (probably due to a bug by design) the tag will be empty if it contains a component:
<template id="foo">
<MyComponent />
</template>
I was contemplating some code which would wrap each child of of the web component. Something like:
<dom-module id=test">
<template>
<template is="dom-repeat" items="{{contents.children}}">
<div>
{{item}}
</div>
</template>
</template>
</dom-module>
so what would happen is if i did something like:
<test>
<span>foo</span>
<span>bar</span>
</test>
it would kick out:
<test>
<div><span>foo</span></div>
<div><span>bar</span></div>
</test>
I was looking over ways i could do this, but i am having issues trying to create the dom-repeat correctly since contents.children isnt a real property.
Edit i was looking at what attributes are allowed for content tags, which is select plus all globals.
So in theory, i could assign an ID and then get the children of it?
<content id="myContent"></content>
and then in the dart say:
ContentElement get _content => $['myContent'];
#property HtmlElement children = [];
a.created(): super.created(){
set("children", _content.children);
}
and then mark the template accordingly?
<template is="dom-repeat" items="{{children}}">
...
</template>
It looks like you would like to wrap certain elements and add some new functionality to them.
The simplest (and most Polymer-ish) way to do that, is to introduce another custom element, which is (only) responsible for the wrapping.
Your test element (which, by the way, has an incorrect name - the name must contain a dash) would then look like this:
<dom-module id=test-element">
<template>
<content></content>
</template>
</dom-module>
(I fixed the naming according to convention. Renamed from test to test-element.)
And the newly created wrapper element (named wrapper-element) should look something like this:
<dom-module id=wrapper-element">
<template>
<div><content></content></div>
</template>
</dom-module>
Everything put together, the usage would be something like this:
<test-element>
<wrapper-element><span>foo</span></wrapper-element>
<wrapper-element><span>bar</span></wrapper-element>
</test-element>
With this, you get a clean solution, where you don't even need any JS code for the wrapping logic.
In polymer, we can create insertion points for HTML content with <content> within custom modules like this.
<my-custom-element>
Surrounding HTML ...
<content></content>
Surrounding HTML ...
</my-custom-element>
and then later use the module like this:
<my-custom-element>foo content</my-custom-element>
Can a custom element support multiple of these <content>-based insertion points? And how?
You can use standard selection of elements from <template> using the <content>'s select attribute with a CSS selector to get different inserted elements.
<template>
Name : <content select="h2"></content><br>
Mail : <content select="#mail"></content>
</tempalte>
<my-custom-element>
<h2>Some One</h2>
<span id="mail">email#internet.com</span>
</my-custom-element>
I'm building a menu with a dom-repeat template like this:
<template is="dom-repeat" items="{{appletsMenu}}">
<a data-route="{{item.dataRoute}}" href="{{item.href}}">
<iron-icon icon="{{item.icon}}" src="{{item.iconSrc}}" ></iron-icon>
<span>{{item.name}}</span>
</a>
</template>
The data-route attribute is not filled though in the generated DOM:
...
...
It seems that the template only renders "normal" attributes like href. Am I'm missing something? Thanks.
To bind to an attribute, use $= rather than =. This results in a call to:
element.setAttribute(attr, value);
As opposed to:
element.property = value;
(source)
So in your case:
<a data-route$="{{item.dataRoute}}" href="{{item.href}}">
Let's say I have something like:
<code>
<polymer-element name'my-element'>
<template>
<div>{{label}}</div>
</template>
</polymer-element>
</code>
Would it be possible for me to simply declare my element this way:
<code>
<my-element label='name'></my-element>
</code>
What I'm doing doesn't seem to work. Is there a straightforward way to bind in the markup?
There are a few issues with what you posted, you are missing an '=' after 'name' in your polymer-element, and you have to either call Polymer to register my-element or include noscript attribute.
In general, if you construct your question in JsBin (or similar) you can make sure you've resolved such issues which otherwise obscure the nature of your question.
Bottom line is that you must make label a published property before Polymer will automatically connect it to attributes. You can make it published by including the name in the attributes attribute of the polymer-element, like this:
<polymer-element name="my-element" attributes="label" noscript>
http://jsbin.com/kizahi/1/edit
<my-element label="name"></my-element>
<polymer-element name="my-element" attributes="label" noscript>
<template>
<div>{{label}}</div>
</template>
</polymer-element>