URLを埋め込んだオリジナルタグ作成してみました。
ここでは・・・
<kaizu-tag> で kaizu.comへのリンク
<kaizu-blog-tag> で kaizu blogへのリンク
を作成して見ました。
ちなみにオリジナルタグは・・・
<kaizu> NG
<kaizu-tag> OK
<my-lkaizu> OK
<kaizu-component> OK
といった縛りがあります。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>kaizu-tag sample</title>
<style>
a {
color: inherit;
text-decoration: none;
}
body {
font-family: sans-serif;
background: blueviolet;
color: white;
margin: 10px auto;
}
</style>
<script src="links/kaizu.js" defer></script>
</head>
<body>
<center>
<p>
<kaizu-tag></kaizu-tag><br>
<kaizu-blog-tag></kaizu-blog-tag>
</p>
</center>
</body>
</html>
<!-- index.html -->
/* Javascriptはlinksフォルダー内 */
/* kaizu.js */
class KaizuTag extends HTMLElement {
connectedCallback() {
const link = document.createElement('a');
link.href = 'https://kaizu.com/';
link.textContent = '-- kaizu.com --';
this.replaceWith(link);
}
}
class KaizuBlogTag extends HTMLElement {
connectedCallback() {
const link = document.createElement('a');
link.href = 'https://kaizu-blog.blogspot.com/';
link.textContent = '-- kaizu blog --';
this.replaceWith(link);
}
}
customElements.define('kaizu-tag', KaizuTag);
customElements.define('kaizu-blog-tag', KaizuBlogTag);
/* kaizu.js */
実行直後の画面です。リンクデータだけで地味すぎるので背景に色を付けてリンクカラーや下線はオフにしています。
kaizu.comのリンクをクリックでサイトへ・・・
kaizu blogのリンクをクリックでブログへ・・・戻る場合はブラウザの戻るで戻ります。
