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>
Related
I´m using this W3 script:
<!DOCTYPE html>
<html>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<body>
<div w3-include-html="content.html"></div>
<script>
w3.includeHTML();
</script>
</body>
</html>
It works perfectly, but my issue would be that I only need one particular portion of the "content.html", and not all of it. So my question is: How do I use w3-include-html for PARTIALLY html include?
Thanks!!
You can't include part of a partial; the whole point of a 'partial' is that it in itself represents part of the code, not code that you should extract a part from.
You can include more than one partial on a page, but the partials themselves must be exactly what you're trying to include at that point; you can't 'extract' content from a partial.
Simply shrink your content.html so that it only contains the output that you would like to include on your main page.
Having said that, considering W3.js can only import HTML, there's literally no reason to store the partial HTML in an external file. Not only does this create a second, unecessary file, but it also adds a reliance on JavaScript. If your visitor opts to disable their JavaScript, your partial won't work. Thus, I strongly recommend simply writing the content of content.html in the main page itself.
Hope this helps!
Question
Which method of placing the <script> tags is "best-practice?"
Inside the <dom-module>?
or
Outside the <dom-module>?
Also, please answer:
Why?
What is the source of your answer?
What downside risks are there by doing it the "wrong" way?
Polymer Starter Kit: OUTSIDE
In the Polymer Starter Kit, the my-list.html and my-greeting.html files place the <script> tag outside the <dom-module>.
Like this:
<dom-module>
<style>...</style>
<template>...</template>
<dom-module>
<script>...</script>
Other Experts: INSIDE
However, I have heard and seen several examples from Google employees and Google developers that suggest the <script> tags should go inside the <dom-module>.
Like this:
<dom-module>
<style>...</style>
<template>...</template>
<script>...</script>
<dom-module>
The correct answer is - it shouldn't matter. While the documentation is indeed as #Mowzer noted, this is just an example rather than a definition. At least some actual Polymer elements like e. g. iron-image have it outside dom-module.
The relationship between the dom-module and the object Polymer constructor defines is established through the 'is' property of the object passed to the Polymer constructor and the id attribute of the dom-module.
From Local DOM guide:
Give the <dom-module> an id attribute that matches its element’s is property and put a inside the <dom-module>. Polymer will automatically clone this template’s contents into the element’s local DOM.
As a side note, you can also successfully use <script src="external.js"></script> to separate the html from the JS - I'm just guessing this is one possible reason for this question. The only drawback to this (AFAIK) is that in this case a vulcanized version of your element will show incorrect (offset) code line numbers for JS errors.
Looks like <script> tags should go inside the <dom-module>.
Per this definition in the developer guide.
Element definition
<dom-module id="element-name">
<template>
<style>
/* CSS rules for your element */
</style>
<!-- local DOM for your element -->
<div>{{greeting}}</div> <!-- data bindings in local DOM -->
</template>
<script>
// element registration
Polymer({
is: "element-name",
// add properties and methods on the element's prototype
properties: {
// declare properties for the element's public API
greeting: {
type: String,
value: "Hello!"
}
}
});
</script>
</dom-module>
I'm tinkering around with Polymer again and there is something I want to do but it doesn't work and the workaround looks so messy. I want to style an element but take advantage of Data Binding. Basically I try to do this:
<dom-module id="proto-element">
<template>
<style>
#wrapper{
width:{{pixels}};
background: #e1e1e1;
}
#bar{
width:80%;
}
</style>
<div id="wrapper">
<div id="bar" style$={{barStyle}}>I'm the bar! <b>{{test}}</b></div>
</div>
</template>
</dom-module>
<script>
Polymer({
is: "proto-element",
ready: function() {
this.pixels = "300px";
this.test = "Fear me!"
}
});
</script>
The text bound to this.test works flawlessley. But the moustache tags that are inside of style get ignored. Is there a simple solution to this? Because using the inline style$= syntax is super messy when you are working with multiple css rules and also you always need to concatinate a string for it to work if the value you want is obtained elsewhere. Any ideas on a nice clean solution?
I'm afraid what you want is (at least currently) not possible. Data-binding works only inside <template> tags, either a <template is="auto-binding"> or the template inside a <dom-module>.
In the <style> tag, data-binding simply won't work. You could try putting another <style> tag INSIDE the <template> tag (which is messy), but you still won't get the data-bound property to work, since the curly brackets {{...}} must be inside an individual tag and can't be (currently) surrounded by whitespaces (spaces, newlines, ...), see docs:
String concatenation is not supported inside a tag, and the tag can’t contain any whitespace ...
tl;dr: There are two issues that prevent you from achieving what you want: 1) Data-binding only works inside a template tag and 2) if you want to print out data-bound properties, they must be enclosed inside a html tag.
You could try a different approach:
ready: function () {
this.$.wrapper.style.width = '300px';
}
this.$ allows you to easily access any DOM element with an id attribute (for example your #wrapper, which is accessed as this.$.wrapper) and from there, you can set any other attribute of the element (this.$.wrapper.style.width in this case).
EDIT: Also, I just noticed that you've actually put <style> tag inside the <template>, which is not advised. Since Polymer 0.8, this is the recommended structure for a custom element:
<dom-module>
<style> ... </style>
<template> ... </template>
</dom-module>
<script> ... </script>
Check out the Overview and Migration guide.
EDIT 2: As of Polymer 1.1 the suggested element structure (as pointed out by Max Waterman) has been updated to:
<dom-module>
<template>
<style> ... </style>
...
</template>
<script> ... </script>
</dom-module>
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>
This is maybe a silly question as it seems quite obvious that it would be hard to implement but nevertheless i'd like to ask...
Taken this markup:
<input is="my-input" name="foo">
and this assumed component:
<polymer-element name="my-input">
<template>
<div>
<span class="myinput" name="{{name}}">
</div>
</template>
....
Is it possible to turn in rendered DOM into:
<div>
<span class="myinput" name="foo">
</div>
by effectively replacing the initial native HTML input?
The use case is to provide a fallback. If the browser is not capable of web components it will fall back to the native control. Furthermore authors can write the syntax they know: HTML - and can enhance the native control with a single 'is' attribute.
Update: No.
Shadow DOM encapsulation (as opposed to altering the user's DOM) is an essential concept in Polymer. There used to be a lightdom attribute that would do something similar to what you're asking for, but it ended up being removed (discussion).
You could very easily use native custom elements alone to implement something like this. Or maybe Mozilla's x-tag or IBM's delite have this use case covered.
Original Answer
Use the extends attribute on your polymer-element tag:
<polymer-element name="my-input" extends="input" attributes="name">
Here's a working example.