How To Disable Accessing Polymer CustomElements Property Accessing From Google Chrome Console

[adity...@gmail.com]

Hi Experts,

suppose i have created an element <my-element></my-element> having one boolean property myvar..Currently Anyone Can modify this value from Chrome console.i want to avoid it

ex

var ele=document.querySelector('my-element');

ele.myvar=false;

Running this code in console will make myvar value to false.

Thanks,

Aditya Gupta

[Daniel Llewellyn]

> On 13 Apr 2017, at 10:32, adity...@gmail.com wrote:
>
> suppose i have created an element <my-element></my-element> having one boolean property myvar..Currently Anyone Can modify this value from Chrome console.i want to avoid it
>
>
> ex
> var ele=document.querySelector('my-element');
> ele.myvar=false;

You have three options:

1. Rename the property to `_myvar` to indicate that it is private (but this does not prevent access)

2. Do not expose the property (remove it from the `properties{}` object). Instead, use the value as a variable internal to your element and do not allow any assignment from outside the element. This does not update bindings automatically. In Polymer 1.x that will be similar to:

(function() {
Polymer({
is: ‘myelement’,
properties: {
// removed the myvar from here
},
myvar: false,
setMyvar: function(newval) {
// allow setting myvar only when you approve of the change with tests in here
if (allowedToSet) {
this.myvar = newval;
// update your DOM as required here, because this does not update bindings automatically
}
}
});
}());

3. Expose the property but do not use directly inside your element, referring instead to a variable which is assigned by an observer. This does not update bindings automatically. For Polymer 1.x this would be similar to:

(function() {
var myvar = false;
Polymer({
is: ‘myelement’,
properties: {
myvar: {
type: Boolean,
value: false,
observer: ‘onMyvarChanged’
}
},
_myvar: false,
onMyvarChanged(newValue, oldValue) {
// allow setting myvar only when you approve of the change with tests in here
if (allowedToSet) {
this._myvar = newval;
// update your DOM as required here, because this does not update bindings automatically
}
}
}
}());