Menu
I know that you can bind properties of an element to a class attribute using the syntax below for elements within a custom element,
<div id="arrow" class$="{{propertyName}}"></div>
but is it possible to apply a binding to the host element itself? I've tried what is shown below, and various other attempts but have failed!
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="my-element" class$="{{propertyName}}">
<template>
<style>
</style>
</template>
<script>
Polymer({
is:'my-element'
});
</script>
</dom-module>
895
What you want to do is possible, by reflecting property value to attribute.
Polymer({
properties: {
someProp: {
reflectToAttribute: true
}
}
});
See below how the class and other properties' value is set on the host node.
I'm not sure though that redefining built-in properties like class is wise. If you want to use reflected properties for styling, better go for attribute selectors like I did with me-elem[other].
Polymer({
is: 'my-elem',
properties: {
class: {
reflectToAttribute: true,
value: 'red'
},
other: {
type: Boolean,
reflectToAttribute: true,
value: true
}
}
});<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import"/>
</head>
<body>
<style>
.red {
color: red;
}
my-elem[other] {
border: solid 1px black;
}
</style>
<my-elem></my-elem>
<dom-module id="my-elem">
<template>
Some text
</template>
</dom-module>
</body>
</html>Finally, be careful with reflectToAttribute, because with large value serialized in DOM you can see a decrease in performance.
52
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
