Таблица стилей сброса Shadow DOM

Я бы хотел, чтобы приложение, которое я делаю, использовал reset.css на глобальном уровне. Мне также хотелось бы, чтобы он проникал во все теневые корни, но имел низкую специфичность. Как я могу это сделать?Таблица стилей сброса Shadow DOM

Допустим, мой reset.css содержит что-то вроде:

li, ::shadow li { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
}

Тогда мой пользовательский элемент имеет шаблон, как:

<template> 
    <style> 
     li { 
      padding: 10px; 
     } 
    <style> 
    <ol> 
     <li>Foo</li> 
     <li>Bar</li> 
     <li>Baz</li> 
    </ol> 
</template>

Мой вопрос селектор шаблона li не обладает достаточной специфичностью бить ::shadow li. Я не хочу повторять себя в каждом пользовательском элементе. Думаю, я мог бы добавить <link> к каждому <template>, но потом я снова повторюсь. Я мог бы также добавить JavaScript в <link>, но я не уверен, что это лучший способ.

Какими другими способами я мог бы использовать reset.css, который проникает в теневые корни, но имеет очень небольшую специфичность?

источник

2015-08-15 Olson.dev

Есть ли причина, по которой вы уклоняетесь от использования классов CSS в своем шаблоне? Почему вы не можете предоставить локальное переопределение для глобальных свойств CSS через класс? –

Вот почему было создано свойство 'all' ... все, что нам нужно сейчас, для всех, кто реализует теневые стили, также реализовать это. – BoltClock

@MikeBrant, я мог бы использовать классы, но даже тогда мне пришлось бы быть более подробным, чем хотелось бы. '.padded {}' не является достаточно конкретным, равно как и 'li.padded' ... Мне пришлось бы использовать' ol li.padded' для переопределения ':: shadow li'. –

Я понимаю, что post postrecreat of :: shadow и/deep/selectors этот вопрос может быть недействительным больше, но если вы все еще сталкиваетесь с этой проблемой, то я предлагаю вам использовать css @imports, чтобы ввести общий сброс .css в теневом корневом шаблоне.

Поскольку он должен быть первым тегом внутри шаблона, ваша встроенная таблица стилей будет иметь приоритет перед reset.css, где это применимо.

Я написал answer здесь, в той же теме, и один here, чтобы ввести эти @imports во время выполнения, если вы не хотите повторять его самостоятельно для каждого шаблона. Возможно, это сработает для вас.

источник

2015-10-06 19:22:29 Abhinav

Это то, чем я закончил, более или менее. Я автоматизировал его с помощью своего кода регистрации пользовательского элемента: он автоматически вставляет '

Таблица стилей сброса Shadow DOM

ответ