当我们要使用Shadow Dom创建自定义单选按钮作为 Web 组件时，就会出现问题。
通常，当我们使用单选按钮时，我们通常会为分组的单选框赋予相同的名称，如下所示。
<input type="radio" name="size" id="small" value="small">
<input type="radio" name="size" id="large" value="large">
但是如果我们定义一些自定义元素（比如 cus-radio） -> 我们会以一种方式将名称和 ID 作为输入（来自父元素）并将它们放在自定义元素中。这将完全适用于正常情况。
但我的问题是影子 dom！当我们在 shadow dom 内创建元素时，其中的属性是可访问的或与外部 dom（主 dom）连接。那么，如果它的 name 和 id 属性在父 dom 中不可访问或通用，我们如何开发自定义单选按钮？
例子：-
我们将像这样开发我们的自定义元素（像角度元素中的伪代码）
radio.html:-
<input type="radio" [name]="name" [id]="id" ...>
TS/逻辑文件：-
...
component cus-radio {
@Input() name: string;
@Input() id: string;
...
无论我们在哪里使用它：-
<cus-radio [id]="'small'" [name]="'size'" value="small">
<cus-radio [id]="'large'" [name]="'size'" value="large">
预期的行为应该是（就像在正常 dom 中发生的那样），这两个无线电输入必须相互关联并存在于两个相互理解中，就像一个被检查了另一个必须取消检查等。但在 shadow dom 中它没有。因为那些 name 和 id 在没有引用父 dom（主 dom）的 shadow …
javascript web-component shadow-dom custom-element angular-elements
我正在尝试将表单控件导出为 Angular 元素（Web 组件），并将其用作本机输入元素，以便它可以与 Angular 反应式表单或与本机 html 输入一起使用的类似库一起使用。
波纹管代码在作为模块中的角度组件导出时起作用。当我将它导出为 Web 组件并尝试以反应形式使用它时，我遇到了问题。
此代码是使用 Angular 7.1 框架编写的。
组件模板
<input ngDefaultControl value="value" />
组件代码：
@Component({
selector: 'cns-text-input',
templateUrl: './text-input.component.html',
styleUrls: ['./text-input.component.scss'],
providers: [ {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TextInputComponent),
multi: true
}]
})
export class TextInputComponent implements ControlValueAccessor, AfterViewInit {
@ViewChild(DefaultValueAccessor) valueAccessor: DefaultValueAccessor;
public ngAfterViewInit() {
console.log('value accessor', this.valueAccessor);
console.log(this);
}
public writeValue(obj: any): void {
this.valueAccessor.writeValue(obj);
}
public registerOnChange(fn: any): void {
this.valueAccessor.registerOnChange(fn);
}
public registerOnTouched(fn: any): void {
this.valueAccessor.registerOnTouched(fn);
} …在 Flutter 中，哪种方式比高负载处理性能更好？
假设我们正在监听一个每秒发出大约 1000 条消息的流。哪种方式会有更好的性能？
1) 使用 setState() 类似
stream.listen((msg) => setState(() => _msg = msg)
然后在构建方法中
return Text(_msg);
2）使用流生成器
StreamBuilder(
stream: stream,
builder: (context, snapshot) {
if (snapshot.hasData) {
return Text(snapshot.data)
);
}
},
)),