Почему полимер добавляет материал в (не теневой) дом?

Я использую полимер 1,0 и у меня есть HTML-файл, который выглядит следующим образом:Почему полимер добавляет материал в (не теневой) дом?

<html> 
<head> 
    <link rel="stylesheet" href="../vendors/font-awesome/css/font-awesome.min.css"> 
    <link rel="stylesheet" href="../vendors/bootstrap/dist/css/bootstrap.min.css"> 
    <!-- Polyfill Web Components support for older browsers --> 
    <script src="../vendors/webcomponentsjs/webcomponents-lite.min.js"></script> 
    <!-- 2. Use HTML Imports to bring in the elements. --> 
    <link rel="import" href="../vendors/paper-button/paper-button.html"> 
    <link rel="import" href="../vendors/paper-header-panel/paper-header-panel.html"> 
    <link rel="import" href="../vendors/paper-toolbar/paper-toolbar.html"> 
    <link rel="import" href="../vendors/paper-drawer-panel/paper-drawer-panel.html"> 
    <link rel="import" href="../vendors/paper-icon-button/paper-icon-button.html"> 
    <link rel="import" href="../vendors/iron-icons/iron-icons.html"> 
    <link rel="import" href="../vendors/iron-icon/iron-icon.html"> 
    <link rel="import" href="../vendors/paper-item/paper-icon-item.html"> 
    <link rel="import" href="../vendors/paper-item/paper-item-body.html"> 
</head> 
<body> 
    <paper-drawer-panel> 
    <paper-header-panel drawer> 
     <paper-toolbar> 
     <div>Application</div> 
     </paper-toolbar> 
     <paper-icon-item scope="paper-icon-item"> 
     <paper-icon-button icon="favorite"></paper-icon-button> 
     <paper-item-body two-line> 
      <div>Alphonso Engelking</div> 
      <div secondary>Change photo</div>  
     </paper-item-body> 
     </paper-icon-item> 
    </paper-header-panel> 
    <paper-header-panel main> 
     <paper-toolbar> 
     <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button> 
     <div>Title</div> 
     </paper-toolbar> 
     <div> Main content.. </div> 
    </paper-header-panel> 
    </paper-drawer-panel> 
</body> 
</html>

Когда я проверить его с Девыми инструментами Chrome я вижу следующий Дом: Messy dom

Как приходит полимер добавляет divs к свету dom? Почему вещи не скрыты в теневом доме? Более конкретно, выбранный элемент div закручивает стиль, как я могу предотвратить его испортить макет?

источник

2015-06-01 oskbor

https://www.polymer-project.org/1.0/articles/shadydom.html#shadow-dom-is-awesome-why-is-there-a-shady-dom –

Начиная с 1.0, для всех браузеров Polymer использует по умолчанию shadyDOM (даже там, где поддерживается поддержка DOM. Это означает, что даже на хром содержимое внутри локального dom (имя полимера теневого/тенистого dom) будет разлито на light dom и будет доступно с использованием API манипуляций с dom.

Вы можете использовать теневое пространство, где оно поддерживается путем настройки глобального полимера settings.

<script> 
    window.Polymer = window.Polymer || {}; 
    window.Polymer.dom = 'shadow'; 
</script>

источник

2015-10-05 03:49:42 Abhinav

Почему полимер добавляет материал в (не теневой) дом?

ответ

Смежные вопросы