Bu imkansız çünkü her makale :before :after sözde elemanları kelimesini kullanmak gibi görünüyor hakkında konuşmak için Google''. İçerik

CSS-Tricks makale, bir resim, bir örnek olarak kaymak nasıl uygulanacağını açıklayan-örnek web bileşenleri için this bu konuda duydum. İçinde göründüğü kod örneğidir bu

CSS

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

HTML

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

Kullanıcı Web Bileşenleri eklemek için izin vermek için kullanılan <content> Bu etiket, yönlendirme gibi görünüyor, ama bu daha derin anlamak isterdim.

DÜZENLEME:

Söz konusu makalede daha okuduktan sonra, bir bağlantı yazarın "DOM CSS Cheatsheet" ::content-eleman pseudo ne olduğunu anlatan bir pasaj içerir: . Gölge keşfettim

Seçer unsuru dağıtılmış düğümler içinde. Eşleştirilmiş olması gerekir desteği olmayan tarayıcılar için dolgu-sonraki-seçici yerel seçici.

::content h1 {
    color: red;
}

Kaynak: http://robdodson.me/blog/2014/04/10/shadow-dom-css-cheat-sheet/

Bu yardımcı olur, ama yine de bu ilişki çok da açık değildi bulmak. Herhangi bir ek anlayışlar?

TL;DR

::content aslında bir yol daha derine inmeye ve stil soyundan gelen ShadowHost hangi normal değil mevcut olması bir tarz, çünkü CSS bilmiyor bakmak için ShadowDOM parçası olmadan ::content.

Bu cevap en azından biraz aşina olduğunuz varsayılmaktadır<template>element veWeb ComponentsözellikleShadowDOMShadowTrees ve iki ana elemanları, ShadowHost ShadowRoot ile ilgilenir.,

Not- Bu yazı gibi, beş büyük tarayıcılar arasında P oranında destek (hatta öneki,-kapalı-varsayılan Destek) Web Bileşenleri için daha az var. Yaparken tüm modern tarayıcılar dışında Microsoft Kenar (Microsoft çalışıyor adding <template> to Edge) desteği <template> sadece son sürümleri Chrome ve Opera destek ShadowDOM tam olarak; Firefox destekleyen bölümden sonra geçiş gerekli özelliği about:config (dom.webcomponents.enabled)doğru.

ShadowDOM kullanma amacı MVC benzerseparation of concerns. Yani, bizim sunum bizim içeriğini ayırmak ve kapsüllü şablonları için izin vermek için daha yönetilebilir hale yardımcı olmak için elimizden kodu istiyoruz. Bu zaten çeşitli programlama dilleri var, ancak HTML ve CSS bir süre sorun olmaya devam etti. Ayrıca, web uygulamaları elemanları, şekillendirme yaparken sınıf isimleri ile çakışıyor olabilir.

Normalde, LightDOM ile etkileşim (bir tür "Işık Alemi"), ama bazen saklama yararlanmak için yararlı olacaktır. Bu tür geçiş "Gölge Alem" (Web Bileşenleri bir parçası) yukarıda belirtilen sorunların önlenmesi için yeni bir yöntemsaklama sağlar. Herhangi stilleri ShadowTree biçimlendirme için senin dışında eğer aynı sınıf veya seçiciler kullanılan bile ShadowTree, uygulamak değil, biçimlendirme uygulanır.

Ne zaman ShadowTree (yaşar ShadowDOM) bir ağaçtan LightDOM dağıtılmış içinde ve/veya zaman ShadowTree işlenmiş, sonucu dönüştürülmüş tarafından tarayıcıya ne denircomposed tree.

Tarayıcı kodunuzu işler, içerik ve yeni yerlerde dağıtılmış gerçekleştirilebiliyordışındafiziksel olarak yazıldı. Bu dağıtılmış çıkış görmek nedir ve tarayıcı gördüğü () ve composed tree denir. Gerçekte, içeriği aslında görünen o sırada yazılmadı, ama bunu bilemezsin, ne tarayıcı. "Sonuç" ve "orijinal kodu" eğer istersen, sarma yararlarından biridir. arasındaki bu ayrımı

Web Components & the Future of CSSharika bir 40 dakikalık Web Bileşenleri ve özellikle ShadowDOM, bana ZachSaucier tarafından gösterilen video.

Sorunuza özel, ::content pseudo element ne denir için geçerlidirdüğümler dağıtılmış. Dağıtılmış bir düğüm ne olursa olsun <content></content> etiketleri nadal'ın başka bir terimdir. İçerikdağıtılmışşablon <content> etiketleri yerleştirilmiş sen her yerde özgün biçimlendirme yerinden.

CSS özgüllüğü ihtiyacınız olduğunda, seçiciler işleyebilir bir yolu normal olarak ana öğe gidin ve seçici bir parçası olarak ekleyin. Örn: eğer .container {} yeterince açık değilse, seçici olması için div .container {} .main .container {} kullanabilirsiniz.

Ölçüm ve saklama olan ShadowDOM anlamı, hakkında düşünme, oluşturduğunuz bu yeni ShadowTree tamamen yeni (ayrık) DOM bir parçası olduğunu anlamalısın. Aynı değil "Işık Alemi" içeriğinizi geri kalanı gibi; bir "Gölge Alem". Nasıl CSS bu hedefe biliyor mu "Gölge Alem"? ::content kullanarak sözde elemanı!::content acts as the parent element of distributed nodes.

HTML5Rocks muhteşem bir dizi eğitimler here, here here hangi kapak daha fazla bilgi vermek ve bazı büyük örnekler (ziyaret etmeyi unutmayın ile Chrome ya da Opera kadar daha fazla tarayıcı desteği bu özellikler).

Örneğin, HTML5Rocks kodu değiştirilmiş ve geliştirilmiş (Leo) bu halini görmek:

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>

Ayrıca mevcutJSFiddle(Y tarayıcısında ziyaret etmeyi unutmayın

Burada olduğunu görebilirsiniz::contentsection p sözde unsurdurilkbiçimlendirme div içeriği ShadowRoot, öğenin içeriği seçipsonraekleme section p daha fazla belirtme.

Bu normal seçici kullanımı (neden sadece kullanmak section p {}?) CSS göre gereksiz görünebilir kadar hatırlarsın o zaman geçme ShadowTree olamaz normalde seçin torunları host elemanları (dağıtılmış düğümler), çünkü onlar "Gölge Alem" de bahsetmiştim daha önce.