Shadow DOM和<label for =“id”>

Question

我有一个包含<label for="...">和<input>（plunk）的简单组件：

@Component({
  selector: 'labeled-input',
  template: `
        <input id="labeled-input">
        <label for="labeled-input">input</label>
  `
})
class LabeledInputComponent {}

id是静态的，它用于将标签绑定到相关输入。

使用默认ViewEncapsulation.Emulated对视图进行封装不够，点击任何标签都会关注第一个输入。

封装适用于ViewEncapsulation.Native，但仅适用于支持的浏览器（Chrome） （a plunk）。

ViewEncapsulation.Native的Web Component Shadow DOM polyfill与此处的ViewEncapsulation.Emulated不同。

如何处理这个案子？