Skip to content

Commit

Permalink
2024/09/01 時点の英語版に基づき更新
Browse files Browse the repository at this point in the history
  • Loading branch information
mfuji09 committed Oct 3, 2024
1 parent 7c34558 commit 9a6d76c
Showing 1 changed file with 5 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: テンプレートとスロットの使用
slug: Web/API/Web_components/Using_templates_and_slots
l10n:
sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
sourceCommit: bc7e82aa6db60568d7146ee285918550bbe4b8ce
---

{{DefaultAPISidebar("Web Components")}}
Expand All @@ -18,15 +18,15 @@ l10n:
簡単な例を見てみましょう。

```html
<template id="my-paragraph">
<template id="custom-paragraph">
<p>My paragraph</p>
</template>
```

これはページ上に表示されず、以下のようなコードで JavaScript で参照を取得し、 DOM に追加することで表示されます。

```js
let template = document.getElementById("my-paragraph");
let template = document.getElementById("custom-paragraph");
let templateContent = template.content;
document.body.appendChild(templateContent);
```
Expand All @@ -45,7 +45,7 @@ customElements.define(
class extends HTMLElement {
constructor() {
super();
let template = document.getElementById("my-paragraph");
let template = document.getElementById("custom-paragraph");
let templateContent = template.content;

const shadowRoot = this.attachShadow({ mode: "open" });
Expand All @@ -63,7 +63,7 @@ customElements.define(
したがって、例えば次のようにすると、

```html
<template id="my-paragraph">
<template id="custom-paragraph">
<style>
p {
color: white;
Expand Down

0 comments on commit 9a6d76c

Please sign in to comment.