web-dev-qa-db-ja.com

:: content / :: slotted疑似要素とは何ですか？

:beforeおよび:after疑似要素について説明しているすべての記事がWordの「コンテンツ」を使用しているように見えるため、これはGoogleにとって不可能です。

this CSS-Tricksの記事で聞いたことがあります。Webコンポーネントの使用例としてイメージスライダーを実装する方法を説明しています。そのため、内部に表示されるコード例は次のとおりです。

[〜＃〜] css [〜＃〜]

#slides ::content img {
   width: 25%;
   float: left;
}

[〜＃〜] html [〜＃〜]

<template>
  ...
  <div class="inner">
    <content select="img"></content>
  </div>
</template>

この<content>タグを参照しているようです。これは、ユーザーがWebコンポーネントを含めることを可能にするために使用されますが、これをより深く理解したいと思います。

編集：

さらに読んだ後、前述の記事で、著者の「Shadow DOM CSS Cheatsheet」へのリンクを発見しました。このリンクには、::content疑似要素とは何かを説明する文章が含まれています。

要素内の分散ノードを選択します。ネイティブセレクターをサポートしないブラウザーの場合は、polyfill-next-selectorとペアにする必要があります。

::content h1 {
    color: red;
}

ソース： http://robdodson.me/blog/2014/04/10/shadow-dom-css-cheat-sheet/

これは役に立ちますが、私はまだ全体の問題がかなり不透明だと感じています。追加の洞察はありますか？

csshtml5web-componentshadow-domhtml5-template
73
jon

::content擬似要素は、Webコンポーネント/シャドウDOMの将来の実装で::slotted擬似要素に置き換えられています。同様に、この擬似要素の対象となる要素は、最新バージョンの Shadow DOM specification で<contentから<slot>に変更されました。その変更に関する関連する議論を見ることができます here 。

現在、ブラウザは<content>と::contentを引き続きサポートしています。

元の回答：

概要：

::contentは、基本的にShadowHostの子孫をより深く掘り下げてスタイルを設定する方法です。CSSは::contentなしでShadowDOMフラグメントを探すことを知らないため、通常はスタイルを設定できません。

この答えは、少なくとも<template>要素と- Webコンポーネント、具体的にはShadowDOM （、ShadowTreesを扱うおよびそれらの2つの主要な要素、ShadowHostおよびShadowRoot。

注-この記事の執筆時点では、5つの主要なWebコンポーネントの50％未満のサポート（プレフィックスのあるデフォルト以外のサポートも）があります。ブラウザ。最新のブラウザはすべて<template>をサポートしていますが、ChromeおよびOperaの最新バージョンのみがShadowDOMを完全にサポートしています。Firefoxでは、必要な機能を切り替えた後、 about:config（dom.webcomponents.enabled）totrue.

ShadowDOMを使用する目的は、MVCの関心の分離に似ています。つまり、コンテンツをプレゼンテーションから分離し、コード内でカプセル化されたテンプレートを使用して、管理しやすくする必要があります。これはすでにさまざまなプログラミング言語で使用されていますが、HTMLおよびCSSではしばらくの間問題のままです。さらに、Webアプリの要素をスタイル設定するときに、クラス名と競合する可能性があります。

通常、LightDOM（一種の「ライトレルム」）と対話しますが、カプセル化を利用すると役立つ場合があります。この種の「シャドウレルム」（Webコンポーネントの一部）を横断することは、カプセル化を許可することで上記の問題を防ぐ新しい方法です。 ShadowTreeのマークアップに適用されるスタイルは、まったく同じクラスまたはセレクターが使用されている場合でも、ShadowTreeの外部のマークアップには適用されません。

ShadowTree（ShadowDOMに存在する）にLightDOMのツリーが分散されている場合、および/またはShadowTreeがレンダリングされる場合、結果はブラウザーによってに変換されます 構成ツリー。

ブラウザがコードをレンダリングすると、コンテンツが配信され、物理的に入力された新しい場所以外に挿入されます。この分散出力は、ユーザーが見るもの（およびブラウザーが見るもの）であり、composed treeと呼ばれます。実際には、コンテンツは現在表示されている順序で元々入力されていませんが、これはわかりませんし、ブラウザも同様です。この「最終結果」と「元のコード」の分離は、カプセル化の主な利点の1つです。

WebコンポーネントとCSSの未来は、Webコンポーネント、特にShadowDOMに関する素晴らしい40分間のビデオで、 ZachSaucier によるme。

あなたの質問に固有の、::content疑似要素は、いわゆる分散ノードに適用されます。分散ノードは、<content></content>タグ内に置くものの別の用語です。コンテンツは、元のマークアップの場所からテンプレート内の<content>タグを配置した場所までのdistributedです。

したがって、CSSに特異性が必要な場合、セレクターを通常処理する1つの方法は、親要素に移動し、セレクターの一部としてそれを追加することです。例：.container {}の具体性が十分でない場合、セレクターを機能させるためにdiv .container {}または.main .container {}を使用できます。

スコープとカプセル化であるShadowDOMのポイントを考えると、作成したこの新しいShadowTreeは完全に新しい（別個の）DOMフラグメントであることを認識する必要があります。他のコンテンツと同じ「ライトレルム」ではありません。 「シャドウレルム」にあります。では、CSSはこの「シャドウレルム」をターゲットとすることをどのように知っていますか？ ::content疑似要素を使用して！

::content疑似要素セレクターは、分散ノードの親要素として機能します。

HTML5Rocksには、一連の素晴らしいチュートリアル here 、 here 、および here があります。これらは、より多くの情報をカバーし、いくつかの素晴らしい例を提供します（必ず= ChromeまたはOperaより多くのブラウザがこれらの機能をサポートするまで）。

たとえば、次のHTML5Rocksのコードの修正および改善されたバージョン（ Leo ）を参照してください。

var div = document.querySelector('div');
var root = div.createShadowRoot();
var template = document.querySelector('template');

root.appendChild(template.content);
<template>
  <style>
    h3 { color: red; }
    content[select="h3"]::content > h3 { color: green; }
    ::content section p { text-decoration: underline; }
  </style>
  <h3>Shadow DOM</h3>
  <content select="h3"></content>
  <content select="section"></content>
</template>

<div>
  <h3>Light DOM</h3>
  <section>
    <div>I'm not underlined</div>
    <p>I'm underlined in Shadow DOM!</p>
  </section>
</div>

JSFiddle（ChromeのようなWebKitベースのブラウザでアクセスすることを忘れないでくださいまたはOpera）

ここでは、::contentsection p疑似要素がfirstであり、ShadowRootの内容（divの内容）を選択していることがわかります。マークアップの要素、およびsection pを追加してさらに指定するthen。

これは、通常のCSSセレクターの使用法（たとえば、なぜsection p {}を使用しないのか）と比較すると、不要に思えるかもしれませんが、ShadowTreeをトラバースするときに、Host要素（どの分散ノードであるか）前述の「シャドウレルム」にあります。

107
TylerH

残念な！残念ながら::contentはv0であり、廃止されました。

v1::slotted。

また、<content>は廃止され、<slot>。

参照してください： http://hayato.io/2016/shadowdomv1/

参照： Webコンポーネント-<content>が<slot>に置き換えられた理由

5
MarcG