What is Web Components?
When you view source for this website,
you will notice that I Have many custom tags.
These tags are "Web Components".
• <menu-90s> - Menu in header
• <lang-switch> - Language in header
• <breadcrumbs-90s> - Breadcrumbs in header
• <translate-content> - Translations in page contents
<cookie-consent-widget> is written with
solid-element
but all the other web components are written as ES6 modules.
However, only <translate-content> does not use Shadow DOM. Since it is used to display the main content of the page, using Shadow DOM would prevent some crawler bots from indexing the page information.
What is Web Components?
ウェブ・ページのソースを見ると分かりますが、
このサイトではカスタム・タグを多用しています。
これらは Web Components です。
• <menu-90s> - ヘッダーのメニュー
• <lang-switch> - ヘッダーの言語切り替え
• <breadcrumbs-90s> - ヘッダーのパンくず
• <translate-content> - ページ内の各言語コンテンツ
<cookie-consent-widget> は
solid-element
を使っていますが、それ以外は ES6 モジュールで書いています。
ただし <translate-content>
だけは Shadow DOM を使っていません。ページの本文を表示するものですから、
Shadow DOM を使ってしまうと、一部のクローラー bots はページ情報をインデックス化できないのです。
What is Web Components?
Khi bạn xem mã nguồn của website này,
bạn sẽ nhận thấy rằng tôi có khá nhiều thẻ tùy chỉnh.
Những thẻ này được gọi là “Web Components”.
• <menu-90s> - Menu ở phần header
• <lang-switch> - Chuyển ngôn ngữ ở header
• <breadcrumbs-90s> - Breadcrumbs ở header
• <translate-content> - Bản dịch trong nội dung trang
<cookie-consent-widget> được viết bằng
solid-element,
còn tất cả các web component khác thì được viết dưới dạng module ES6.
Tuy nhiên, chỉ có <translate-content> là không sử dụng Shadow DOM. Vì nó dùng để hiển thị nội dung chính của trang, nên nếu dùng Shadow DOM thì một số bot crawler sẽ không thể lập chỉ mục (index) thông tin của trang.
