diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-01-03 02:06:45 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-01-10 11:20:52 +0900 |
commit | a70e79de3a392914ce5aa790ce56295faed73141 (patch) | |
tree | 501e5ab94ec2b5918b4ec4df6efc63220069e0f8 /files/ja/web/css/_doublecolon_slotted/index.html | |
parent | b9733e1f4c074db487db066b2f3678dd3fe9d9b8 (diff) | |
download | translated-content-a70e79de3a392914ce5aa790ce56295faed73141.tar.gz translated-content-a70e79de3a392914ce5aa790ce56295faed73141.tar.bz2 translated-content-a70e79de3a392914ce5aa790ce56295faed73141.zip |
擬似要素の文書を変換準備
Diffstat (limited to 'files/ja/web/css/_doublecolon_slotted/index.html')
-rw-r--r-- | files/ja/web/css/_doublecolon_slotted/index.html | 111 |
1 files changed, 0 insertions, 111 deletions
diff --git a/files/ja/web/css/_doublecolon_slotted/index.html b/files/ja/web/css/_doublecolon_slotted/index.html deleted file mode 100644 index dab52cf344..0000000000 --- a/files/ja/web/css/_doublecolon_slotted/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: '::slotted()' -slug: 'Web/CSS/::slotted' -tags: - - '::slotted' - - CSS - - Reference - - ウェブ - - レイアウト - - 疑似要素 -translation_of: 'Web/CSS/::slotted' ---- -<div>{{ CSSRef }}</div> - -<p><strong><code>::slotted()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/Pseudo-elements">疑似要素</a>で、 HTML テンプレート内にあるスロットに配置された任意の要素を表します (詳しくは<a href="/ja/docs/Web/Web_Components/Using_templates_and_slots">テンプレートとスロットの利用</a>をご覧ください)。</p> - -<p>これは <a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a> 内に配置された CSS の中で使われた時のみ機能します。なお、このセレクターはスロット内に配置されたテキストノードは選択しません。実際の要素のみを対象にします。</p> - -<pre class="brush: css no-line-numbers">/* スロット内に配置された任意の要素を選択 */ -::slotted(*) { - font-weight: bold; -} - -/* スロット内に配置された <span> 要素を選択 */ -::slotted(span) { - font-weight: bold; -} -</pre> - -<h2 id="Syntax" name="Syntax">構文</h2> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<p>以下のコードの断片は <a href="https://github.com/mdn/web-components-examples/tree/master/slotted-pseudo-element">slotted-pseudo-element</a> デモから取られたものです (<a href="https://mdn.github.io/web-components-examples/slotted-pseudo-element/">ライブでもご覧ください</a>)。</p> - -<p>このデモでは、3つのスロットを持つ単純なテンプレートを使用します。</p> - -<pre class="brush: html"><template id="person-template"> - <div> - <h2>Personal ID Card</h2> - <slot name="person-name">NAME MISSING</slot> - <ul> - <li><slot name="person-age">AGE MISSING</slot></li> - <li><slot name="person-occupation">OCCUPATION MISSING</slot></li> - </ul> - </div> -</template></pre> - -<p>カスタム要素 — <code><person-details></code> — は以下のように定義されています。</p> - -<pre class="brush: js">customElements.define('person-details', - class extends HTMLElement { - constructor() { - super(); - let template = document.getElementById('person-template'); - let templateContent = template.content; - - const shadowRoot = this.attachShadow({mode: 'open'}); - - let style = document.createElement('style'); - style.textContent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' + - 'h2 { margin: 0 0 10px; }' + - 'ul { margin: 0; }' + - 'p { margin: 10px 0; }' + - '::slotted(*) { color: gray; font-family: sans-serif; } '; - - shadowRoot.appendChild(style); - shadowRoot.appendChild(templateContent.cloneNode(true)); - } -})</pre> - -<p><code>style</code> 要素のコンテンツを埋めると、スロットになるすべての要素を選択し (<code>::slotted(*)</code>)、それぞれに異なるフォントと色を与えているのが分かるでしょう。これにより、隣のコンテンツが埋まらなかったスロットよりも目立たせることができます。</p> - -<p>この要素がページに挿入されると、以下のように見えます。</p> - -<pre class="brush: html"><person-details> - <p slot="person-name">Dr. Shazaam</p> - <span slot="person-age">Immortal</span> - <span slot="person-occupation">Superhero</span> -</person-details></pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS Scope', '#slotted-pseudo', '::slotted') }}</td> - <td>{{ Spec2('CSS Scope') }}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.selectors.slotted")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/Web_Components">Web components</a></li> -</ul> |