DEV Community

Discussion on: Create Reusable Web Components in HTML

Collapse
 
maciejcieslik profile image
Maciej Cieslik

And what about SEO? Funny as it is but not practical in real life.

Collapse
 
bennypowers profile image
Benny Powers 🇮🇱🇨🇦

Google executes JavaScript and has no problem parsing your content even if it's in shadow DOM.

But you don't have to put your content in shadow root, in fact, for many applications, it's better to keep content in the light DOM of the document.

Collapse
 
milabron profile image
milabron • Edited

Example? I ask this to see if there is anything special to do when you are not using shadow

Thread Thread
 
milabron profile image
milabron • Edited

I have other doubt it would not have been better to put the template in a method of the Header class, which returns the element in question, especially to have an order, do it as it is now does not give me any help to organize the code. And it's as if it was the same code of all life, even worse because it puts it in a shadow, to which I guarantee you Google doesn't have access.

Thread Thread
 
bennypowers profile image
Benny Powers 🇮🇱🇨🇦

a shadow, to which I guarantee you Google doesn't have access.

I wouldn't take that guarantee. Google search absolutely, 100%, without a doubt DOES read content in shadow DOM. Bing as well.

I have other doubt it would not have been better to put the template in a method of the Header class

If you're using a <template> element, then the template should either be in module scope or a static member of the class. If you make it an instance field or method, you will lose the performance benefit of only parsing the HTML once.

And this is in fact how FASTElement does it. LitElement however lets you define a render method on the instance, which will perhaps be more suitable for you.

Collapse
 
maciejcieslik profile image
Maciej Cieslik

Ok - Google reads and executes js, but Bing and other crawlers mostly not, so as i really want this to be prod solution i think it is just a cool experiment or usable only if website or app will have traffic ONLY from google (and this is far from reality).

Thread Thread
 
bennypowers profile image
Benny Powers 🇮🇱🇨🇦 • Edited

Bing executes JS. Bing crawls shadow DOM content, just like Google does.

Thread Thread
 
maciejcieslik profile image
Maciej Cieslik

Executing js is not the same as reading content corectly - i don't remember where, but i saw tests and bing readed component, but without semantic - if i'm incorrect about this, someone please correct me.

Would be nice if you show here tests with all the biggest search engines showing, this method is not impacting seo at all.

Thanks in advance.