هل تريد تطبيق الأنماط على العناصر الخاصة بالمتصفحات، على ShadowDOM الأصلي؟

Question

بعد حديث روب دودسون على Web Components، حيث ذكر العلامة التجارية الجديدة "cat" ^^ و "القبعة" ^ محددات CSS، لقد سألت عن إمكانيات تطبيق الأنماط ليس فقط على ShadowDOM للعنصر المخصص، ولكن أيضًا على ShadowDOM للعناصر الأصلية للمتصفح؟

هل من الممكن تصميم عناصر من ShadowDOM؟في أي متصفحات وكيف؟المقالة الوحيدة ذات الصلة التي وجدتها كانت بقلم ديمتري جلازكوف على "ما هيك هو الظل DOM؟'، حيث يقوم بالتخطيط للوصول إلى أشجار ShadowDOM الفرعية باستخدام المحددات الزائفة و -webkit-appearance: none; قواعد.

Answer 1

نظرا لحالة مشروع وحدة نطاق CSS المستوى 1 ولكوني قادرًا على التغيير في أي لحظة، فإن أسلوبي الأصلي لم يكن يعمل لفترة طويلة.

في كروم الإصدار 33+ سيكون عليك أن تستدير Enable Experimental Web Platform Features في chrome://flags تشغيل لكي يعمل الكود أدناه.

---

بدءا من كروم كناري v33 ومحدد القط ^^ الجواب هو: نعم!
تحديث 2014-03-30: كروم كناري v35+ يدعم أحدث إصدار من المحدد، الآن ما يسمى /deep/ محدد.

إنه يصمم على جميع الحدود ويعمل أيضًا على العناصر الأصلية.

يرى: http://codepen.io/Volker_E/pen/jsHFC

/* ... Example for applying to all h2 elements, no matter if DOM or any ShadowDOM subtree ... */
:root ^^ h2 {
    font-family: "Arial Black", sans-serif;
}

/* Cr 33+: The "cat" also works on native elements' ShadowDOM */
video ^^ input[type="button"]:first-child {
    opacity: .75;
    -webkit-filter: drop-shadow( .2rem .2rem .2rem hsla( 5, 100%, 50%, 1 ) );
}

/* Cr 35+: /deep/ also works on native elements' ShadowDOM */
video /deep/ input[type="button"]:first-child {
    opacity: .75;
    -webkit-filter: drop-shadow( .2rem .2rem .2rem hsla( 5, 100%, 50%, 1 ) );
}

Answer 2

فمن الممكن، على الأقل في كروم.إذا قمت بفحص Shadow DOM لـ <input type="date"> سوف ترى:

<input type="date">
  #document-fragment
    <div part="-webkit-datetime-edit" id="date-time-edit">
      <div part="-webkit-datetime-edit-fields-wrapper">
        <span role="spinbutton" aria-valuetext="blank" aria-valuemin="1" aria-valuemax="12" aria-help="Month" part="-webkit-datetime-edit-month-field">mm</span>
        <div part="-webkit-datetime-edit-text">/</div>
        <span role="spinbutton" aria-valuetext="blank" aria-valuemin="1" aria-valuemax="31" aria-help="Day" part="-webkit-datetime-edit-day-field">dd</span>
        <div part="-webkit-datetime-edit-text">/</div>
        <span role="spinbutton" aria-valuetext="blank" aria-valuemin="1" aria-valuemax="275760" aria-help="Year" part="-webkit-datetime-edit-year-field">yyyy</span>
      </div>
    </div>
</input>

بعد ذلك يمكنك تصميم عناصر زائفة منفصلة:

::-webkit-datetime-edit-year-field {
  font-weight: bold;
}

وفقا لروب دودسون نفسه فمن الممكن استخدامها ^ و ^^ محددات لتصميم Shadow DOM الأصلي.لذلك يجب أن تعمل هذه القاعدة (أعتقد أن Chrome Canary):

input[type="date"] ^ [part="-webkit-datetime-edit-year-field"] {
  font-weight: bold;
}