1
사용자 정의 요소를 만들고 shadowRoot에 NotSupportedError (DOM Exception 9): A newly constructed custom element must not have child nodes을 던지는 다른 사용자 정의 요소를 포함하도록 설정합니다. 마크 업에 하위 사용자 정의 요소가 없으면 오류가 발생하지 않습니다.Safari NotSupportedError 부모 요소의 생성자에서 shadowRoot.innerHTML의 사용자 정의 요소
NotSupportedError을 Safari에 던지지 않도록 내 생성자를 변경하는 적절한 방법이 있습니까?
이 요소와 내용을 설정하는 더 좋은 방법이 있습니까?
왜 마크 업 내에 다른 맞춤 요소가있는 경우에만 이런 현상이 발생합니까?
감사합니다. 다음은 관련 저작의 발췌 부분입니다.
class MyControl extends HTMLElement{
constructor(){
super();
var shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = `<slot name=form><select-provider src="/path/to/endpoint"></select-provider></slot>
`;
}
}
customElements.define('my-control', MyControl);
class SelectProvider extends HTMLElement{
constructor(){
super();
var shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = `<slot></slot>
`;
}
/* omitted handling of src, loading url */
render(){/* rewrite select with options */}
}
customElements.define('select-provider', SelectProvider);
</script>
<my-control><span>this custom element throws and error in Safari</span></my-control>
슬롯 태그는 삽입 지점과 마찬가지로 비어 있어야합니다. – Supersharp
@Supersharp 콘텐츠가 제공되지 않을 때 슬롯의 콘텐츠가 기본 콘텐츠입니다. 다른 말로하면 이것은 유효하고 바람직한 사용법이며 슬롯의 이름이 붙여진 이유입니다. 'NotSupportedError'가 제안하는 행에 따라 슬롯을 조정하면 사라지는 것을 보시겠습니까? – jimmont
맞아요.하지만 제거 할 때 여전히 Safari에서 오류가 발생합니까? – Supersharp