содержания Styling вставляется в Shadow DOM

Question

У меня есть этот пример:

http://codepen.io/dbugger/pen/IuDxw

Где есть точка вставки внутри Shadow DOM, и я стараюсь, чтобы применить стиль к нему, что делает его исчезнуть. Но изображение все еще видно. Я подозреваю, что есть какой-то принцип, который я не скрывал от веб-компонентов.

Может кто-нибудь объяснить мне, что я делаю неправильно?

Answer 1

Фокус в том, что изображение не является, как упоминалось, kkemple частью Shadow DOM, а скорее Light DOM, что означает, что он напрямую не доступен изнутри компонента. Это предоставленный пользователем контент, например параметры, переданные в конструктор класса на языке ООП. Если это вообще возможно, пользователь должен предоставить свои собственные стили, чтобы пойти с ним.

Это, как говорится,, существуют определенные варианты использования, когда автор компонента хочет создать контент, предоставленный пользователем. Скрытие определенных частей пользовательской разметки на основе атрибутов на хосте, события (клики) и т. Д., Безусловно, являются одним из них. В этом случае, оберните <content> элемент в элементе Shadow DOM и скрыть что:

<template> 
    <style> 
    .image { 
     display: none; 
    } 
    </style> 
    <div class="image"> 
    <content></content> 
    </div> 
</template> 

http://codepen.io/anon/pen/rCGqD

На стороне записки: Это технически возможно apply styles directly to Light DOM elements, но имейте в виду, что в во многих случаях это считается утечкой деталей реализации во внешний мир. Если первое решение работает, используйте это вместо этого.

Answer 2

Не знаете, почему у вас голосуют за это, но причина, по которой он не работает, заключается в том, что ваш код не находится в тени DOM, div и изображение по-прежнему доступны по умолчанию. Я разветвил ваш код и добавил стиль, чтобы вы могли видеть.

http://codepen.io/kkemple/pen/euBKs

Я не пошел в том, почему он не создает DOM элемент тень, как ваш JS выглядел правильно для меня, но здесь большая статья на теневые DOM веб-нентов:

http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/