Я подозреваю, что есть проблема с тем, как браузеры применяют стили по умолчанию к таким вещам, как <button> elements
, чтобы полностью понять мою головоломку, это включает в себя теневой дом, и я объясню это в концеоднако сейчас давайте просто сосредоточимся на версии проблемы, которую я выделил, на простой вопрос о CSS:
как я могу сбросить <button> к его исходному стилю браузера по умолчанию?
Я пытался установить свойства, такие как border: initial;, border: unset; и border: inherit;, но в любом случае установка любого из этих свойств CSS для элемента кнопки приводит к тому, что браузер освобождает любой из своихстиль по умолчанию
см. следующий пример на codepen
<button>control</button>
<button id="b1">b1</button>
<button id="b2">b2</button>
<button id="b3">b3</button>
<button id="b4">b4</button>
<button id="b5">b5</button>
<button id="b6">b6</button>
<style>
#b1 { background: initial; }
#b2 { background: unset; }
#b3 { background: inherit; }
#b4 { border: initial; }
#b5 { border: unset; }
#b6 { border: inherit; }
</style>
, в этом примере первая кнопка является элементом управления, поэтому мы можем видеть стиль браузера по умолчанию
на кнопках, где мы пытаемся сбросить background, кнопка полностью меняет стиль, фон исчезает, и даже граница меняет
на кнопках, где мы пытаемсядля сброса border кнопка полностью меняется, но странным образом - здесь граница исчезает, а фон меняется
Чем объясняются эти странные и неожиданные результаты?
Почемумне нужно сбросить кнопку, спросите вы?Вы думаете, что это странная вещь?Рассмотрим мой вариант использования с веб-компонентом и теневым домом:
- Я использую теневой дом с некоторыми веб-компонентами
- Я хочу, чтобы пользователи могли ПОЛЬЗОВАТЕЛЬНО устанавливать стили для некоторой тени
<button> s - , поэтому я установил
button { border: var(--button-border); } - , однако, даже если пользователь не предоставляет
--button-border, кнопка визуально управляется и стили браузера не применяются
- четная настройка
button { border: var(--button-border, initial); } и другие примеры не работают - как я могу дать пользователям моих компонентов возможность отстегивать кнопки от стиля по умолчанию, оставляя при этом нетронутымикнопки по умолчанию, когда они решают не применять какие-либо стили кнопок?
Я чувствую, что застрял здесь, и браузер может не получить ответа на эту проблему - я боюсь, что яВам придется либо отказаться от стиля по умолчанию для кнопок в моих компонентах (плохая практика, кнопки по умолчанию должны быть знакомы пользователям), либо отказаться от любого пользовательского стиля для кнопок (плохо для дизайна).rs это точно) - есть ли надежда спасти эту ситуацию?