Using iron-meta to manage state in Polymer 2.x - polymer

Question

I am trying to use iron-meta to manage state in a Polymer app. Here is my Plunker demo.
On that same Plunker, I am also using Mixins to manage state. (So we can compare the two systems.)
Desired Behavior
On the demo, at the bottom, I expect the part that follows "Meta says:" to match and track the part that follows "Send notifications option is:" when the options checkbox at the top labeled "Send Notifications" is clicked.
Actual Behavior
But instead of that desired behavior, the actual behavior I get is the "Meta says:" section never populates with any data.
Demo
Plunker Demo
Demo screen recording
my-view2.html
<link rel="import" href="my-options.html">
<base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="iron-meta/iron-meta.html">
<dom-module id="my-view2">
<template>
<style>
:host {
display: block;
padding: 10px;
}
</style>
<iron-meta key="meta" value="{{meta}}"></iron-meta>
<my-options></my-options>
<div class="card">
<div class="circle">2</div>
<h1>View Two</h1>
<p>Ea duis bonorum nec, falli paulo aliquid ei eum.</p>
<p>Id nam odio natum malorum, tibique copiosae expetenda mel ea.Detracto suavitate repudiandae no eum. Id adhuc minim soluta nam.Id nam odio natum malorum, tibique copiosae expetenda mel ea.</p>
<p>Send notifications option is: <b>[[ options.subscribe ]]</b></p>
<p>Meta says: <b>[[ meta ]]</b></p>
</div>
</template>
<script>
class MyView2 extends MyOptionsMixin(Polymer.Element) {
static get is() {
return 'my-view2';
}
}
window.customElements.define(MyView2.is, MyView2);
</script>
</dom-module>
my-options.html
<base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="paper-checkbox/paper-checkbox.html">
<link rel="import" href="iron-meta/iron-meta.html">
<dom-module id="my-options">
<template>
<style>
:host {
display: block;
padding: 16px;
}
h3, p {
margin: 8px 0;
}
</style>
<iron-meta key="meta" value="[[options.subscribe]]"></iron-meta>
<h3>Options</h3>
<p>
<paper-checkbox checked="{{ options.subscribe }}">Send Notifications</paper-checkbox>
</p>
</template>
<script>
(function() {
let optionsInstance = null;
class MyOptions extends Polymer.Element {
static get is() { return 'my-options'; }
static get properties() {
return {
options: {
type: Object,
value: () => ({
subscribe: false
})
},
subscribers: {
type: Array,
value: () => []
}
}
}
static get observers() {
return [
'optionsChanged(options.*)'
]
}
constructor() {
super();
if (!optionsInstance) optionsInstance = this;
}
register(subscriber) {
this.subscribers.push(subscriber);
subscriber.options = this.options;
subscriber.notifyPath('options');
}
unregister(subscriber) {
var i = this.subscribers.indexOf(subscriber);
if (i > -1) this.subscribers.splice(i, 1)
}
optionsChanged(change) {
for(var i = 0; i < this.subscribers.length; i++) {
this.subscribers[i].notifyPath(change.path);
}
}
}
window.customElements.define(MyOptions.is, MyOptions);
MyOptionsMixin = (superClass) => {
return class extends superClass {
static get properties() {
return {
options: {
type: Object
}
}
}
connectedCallback() {
super.connectedCallback();
optionsInstance.register(this);
}
disconnectedCallback() {
super.disconnectedCallback();
optionsInstance.unregister(this);
}
}
}
}());
</script>
</dom-module>

Answer 1

The short answer is: <iron-meta> doesn't have notification support.
https://github.com/PolymerElements/iron-meta/issues/9
Your example is relying on the fact the two-way bindings work and your meta property gets updated when the observed key changes. This is not the case. Internally, values are simply assigned to a global store, and there is not publish/subscribe mechanism in-place.
https://github.com/PolymerElements/iron-meta/blob/master/iron-meta.html#L91
If you're using Polymer 1.x, maybe this element will satisfy your needs:
https://www.webcomponents.org/element/trofrigo/global-variable