horang-e
commented
3 weeks ago 오 덕분에 뒤에 언급이 없어서 공부하지 않았던 섀도우DOM 에 대해 한번더 찾아보고 공부하는 계기가 되었습니다!!! bbbb
SEO 측면에서 섀도우 DOM의 장단점
구글의 검색 엔진에서는 섀도우 DOM을 평면화 해서 읽어 온다고 합니다!
<script>
class MyComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
let p = document.createElement('p');
p.innerHTML = 'Hello World, this is shadow DOM content. Here comes the light DOM: <slot></slot>';
this.shadowRoot.appendChild(p);
}
}
window.customElements.define('my-component', MyComponent);
</script>
<my-component>
<p>This is light DOM content. It's projected into the shadow DOM.</p>
<p>WRS renders this content as well as the shadow DOM content.</p>
</my-component>
위처럼 만들면 랜더링 후 구글은
<my-component>
Hello World, this is shadow DOM content. Here comes the light DOM:
<p>This is light DOM content. It's projected into the shadow DOM<p>
<p>WRS renders this content as well as the shadow DOM content.</p>
</my-component>이렇게 읽어 온다고 합니다! 그렇기 때문에 mode : 'open'을 사용해서 만든다고 한다면 SEO저하는 없을 것이라고 생각됩니다! 'closed'모드에 대해서는 web.dev에서
라고 나왔고
Note: Closed shadow roots are not very useful. Some developers will see closed mode as an artificial security feature. But let's be clear, it's not a security feature. Closed mode simply prevents outside JS from drilling into an element's internal DOM.
라고도 언급 된걸 보니 open 과 매한가지로 읽어오지 않을까..요?
섀도우 돔에 대한 블로그 SEO와 섀도우 돔에 대한 테스팅 구글의 서치콘솔이 Shadow DOM을 처리하는 방법 closed 모드는 왠만하면 쓰지말아라!
Joie-Kim
chhw130
🧐 Question
1. SEO 측면에서 섀도우 DOM의 장단점
2. 접근성과 성능 최적화
📝 Reference