Как защитить CSS директивы angularjs? - PullRequest
0 голосов
/ 08 октября 2018

Одна из моих директив AngularJS использует CSS в своем шаблоне.Как мне защитить этот CSS от внешних классов CSS, определенных пользователем?

 <selectable-data-list items="myItems"></selectable-data-list> 

шаблон состоит из поля div как:

<style>
 .selectable-data-list{
     position: relative;
 }
 .selectable-data-list .someclass{
     position: absolute;
     top: 0;
     right: 0;
 }
</style>
<div class="selectable-data-list">
    <!--some additional elements -->
    <div class="someclass">something</div>
</div>

Итак, если пользователь добавляеткласс .someclass{position: relative;}, в котором мои директивы будут требовать, чтобы пользовательский интерфейс перемешивался или испортился.

Итак, как мне его защитить ??

Я знаю способ сделать это с помощью некоторого длинного случайногоСтрока в качестве имени класса.Но есть ли альтернативный способ сделать это?

Ответы [ 2 ]

0 голосов
/ 09 октября 2018

Вы не можете защитить свои ccs.Я использую несколько директив и их собственные шаблоны CSS и постоянно получаю противоречивые правила CSS.

Лучшее, что можно сделать, это тщательно определить классы CSS для своих директив.Это сведет к минимуму противоречивые правила CSS для пользователей и вас самих.Потому что ! Важный не поможет, если у вас есть несколько правил CSS, указывающих на один и тот же объект.

0 голосов
/ 08 октября 2018

Я не думаю, что вы можете полностью защитить это TBH.Если вы беспокоитесь о случайной перезаписи, вы можете сделать имена классов более уникальными - возможно, даже сгенерированный GUID некоторого вида.Или рассмотрите идентификатор, на самом деле вы пытаетесь сделать свой селектор более конкретным, чем любой потенциальный внешний CSS, а идентификатор специфичен для элемента.

Вы можете css значения с помощью !important, но вы должны взглянутьна Каковы последствия использования "! Important" в CSS? - особенно часть о том, "что не так с использованием! важный".Даже тогда, если потребитель создает селектор, который является более конкретным и имеет флаг !important, он победит.

Надеемся, у кого-то еще будет более определенный ответ.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...