聚合物组件中的剔除与阴影Dom绑定正确，但与阴影Dom绑定

Question

I've the following polymer component (only for testing):

<dom-module id="visu-conveyor">
    <template>
        <div id='conveyor'>
            {{objectName}}
            <div style="width: 80px; height: 90%;">
                <div style="width: 10px; height: 10px; background: blue;" data-bind="visible: B.B.Value"></div>
                <span data-bind="text: $data"></span>
            </div>
        </div>

    </template>

    <script>
    Polymer({
        is: "visu-conveyor",
        properties: {
            objectName: String
        },
        attached: function () {
            var self = this;
            var dc = ko.dataFor(self);
            ko.applyBindings(dc, self.$.conveyor);
        }
    });
    </script>
</dom-module>

this component maybe hosted in another component like this:

<dom-module id="visu-tag-root-canvas">
    <template>
        <div style="height: 100%; width: 100%" id="rootObj">
            <content></content>
        </div>

    </template>

    <script>
    Polymer({
        is: "visu-tag-root-canvas",
        properties: {
            tagRoot : String
        },
        ready: function () {
            var self = this;

            var dc = ko.dataFor(self);

            if (self.tagRoot != null) {
                //self.$.rootObj.setAttribute("data-bind", "with: " + self.tagRoot);
                //todo -> get folder recursive
                ko.applyBindings(dc[self.tagRoot], self.$.rootObj);
            } else {
                ko.applyBindings(dc, self.$.rootObj);
            }
        }
    });
    </script>
</dom-module>

For Example a Page may look like this:

<visu-tag-root-canvas>
    <visu-conveyor style="width: 88px; height: 130px; top: 74px; position: absolute; left: 64px;" object-name="HH66"></visu-conveyor>
    <visu-conveyor style="width: 88px; height: 130px; top: 74px; position: absolute; left: 160px;" object-name="aa31"></visu-conveyor>
    <visu-tag-root-canvas tag-root="A" style="left: 284px; position: absolute; top: 255px; width: 305px; height: 216px;">
            <visu-conveyor style="width: 88px; height: 130px; top: 27px; position: absolute; left: 30px;" object-name="EE77"></visu-conveyor>
            <visu-conveyor style="width: 88px; height: 130px; top: 27px; position: absolute; left: 126px;" object-name="II88"></visu-conveyor>
    </visu-tag-root-canvas>
</visu-tag-root-canvas>

That means the 2 visu-conveyors inside the 2nd visu-tag-root-canvas should bind to "ABB" and the ones outside to "BB"!

This works with shady dom! But when I enable shadow Dom, all bind to the same Variable! "BB"

As Addition my DataContext for Binding looks like this:

{
A {
  B {
    B {
      Value 
      }
    }
  }
B {
  B {
    Value
    }
  }
}

Answer 1

Was my fault. Since ShadowDom bring real encapsulation, ko.dataFor(self) returns the same for all visu-conveyor, because the dom is encapsualted!

If I change "self.$.rootObj" to "self" it works with shadow dom enabled