Как обеспечить запасное CSS -значение в пользовательском элементе? - PullRequest
Новая
       39

Как обеспечить запасное CSS -значение в пользовательском элементе?

2 голосов
/ 16 января 2020

У меня есть пользовательский веб-компонент, который по сути является SVG-Icon: 

<custom-icon>
    <svg>{svg-stuff}</svg>
</custom-icon>

Я хочу иметь возможность изменить его размер, применяя CSS следующим образом: 

custom-icon {
    width: 20px;
}

Но я также хотел бы иметь запасное значение по умолчанию, когда CSS не применяется. Однако, когда я вставляю в строку некоторые CSS, такие как <custom-icon style="width:15px">, они просто перезаписывают все CSS, которые я применяю впоследствии. Как можно применить стандартное «15px», только если нет пользовательских CSS?

MWE: 

class CustomIcon extends HTMLElement {
  constructor() {
    super();
    
    let size = "100px"
    
    this.style.height = size;
    this.style.width = size;
    
    this.style.background = "firebrick"
    this.style.display = "block"
  }
}

window.customElements.define('custom-icon', CustomIcon);
custom-icon {
  --icon-size: 50px;
  height: var(--icon-size);
  width: var(--icon-size);
}
<custom-icon />

Ответы [ 3 ]

2 голосов
/ 17 января 2020

Если содержимое вашего пользовательского элемента инкапсулировано в Shadow DOM, что является рекомендуемой практикой, вы можете использовать псевдокласс :host для определения стиля по умолчанию.

Тогда, если вы определите глобальный стиль для своего пользовательского элемента, он переопределит тот, который определен с помощью :host. 

customElements.define( 'custom-icon', class extends HTMLElement {
  constructor() {
    super()
    let size = 100
    this.attachShadow( { mode: 'open' } )
        .innerHTML = `
          <style>
            :host {
               display: inline-block ;
               height: ${size}px ;
               width: ${size}px ;
               background-color: firebrick ; 
               color: white;
            }
          </style>
          <slot></slot>`
  }
} )
custom-icon#i1 {
  --icon-size: 50px;
  height: var(--icon-size);
  width: var(--icon-size);
}
<custom-icon id="i1">sized</custom-icon>
<hr>
<custom-icon>default</custom-icon>
1 голос
/ 16 января 2020

Порядок применяется в соответствии с каскадом .

CSS, примененным с помощью атрибута style, в нижней части каскада. По сути, если вы не указываете через атрибут, когда он возвращается к таблице стилей.

Так что 20px является запасным вариантом, когда вы не указываете 15px.

Вы можете написать свой запасной вариант CSS, используя другой набор правил с менее определенным c селектором (хотя единственное, что менее конкретно c, чем один тип селектор (например, custom-icon) - это универсальный селектор (*), который не полезен), поэтому вам нужно заменить custom-icon чем-то больше Speci c.

Другим вариантом является использование кувалды и создание каждого правила в вашем наборе правил !important.

Лучшим вариантом, вероятно, будет исправление любых обстоятельств, которые могут привести к отсутствию вашего CSS в первое место.

0 голосов
/ 16 января 2020

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

Ниже вы можете увидеть, что размер не будет действовать, пока мы не удалим настраиваемое свойство (установив initial) 

class CustomIcon extends HTMLElement {
  constructor() {
    super();
    
    this.style.height = `var(--icon-size, ${this.getAttribute('size')})`;
    this.style.width = `var(--icon-size, ${this.getAttribute('size')})`;
    
    this.style.background = "firebrick"
    this.style.display = "block"
  }
}

window.customElements.define('custom-icon', CustomIcon);
custom-icon {
  --icon-size: 50px;
  margin:5px;
}
<custom-icon size="15px"></custom-icon>
<custom-icon size="25px"></custom-icon>
<custom-icon size="2050px"></custom-icon>


<custom-icon size="200px" style="--icon-size:initial"></custom-icon>

Смежный вопрос для понимания использования initial: CSS пользовательских свойств (переменных) для блочной модели

Еще один пример, когда пользовательское свойство изначально не задано. 

class CustomIcon extends HTMLElement {
  constructor() {
    super();

    this.style.height = `var(--icon-size, ${this.getAttribute('size')})`;
    this.style.width = `var(--icon-size, ${this.getAttribute('size')})`;

    this.style.background = "firebrick"
    this.style.display = "block"
  }
}

window.customElements.define('custom-icon', CustomIcon);
custom-icon {
  margin: 5px;
}

.set {
  --icon-size: 50px;
}
<div class="set">
  <custom-icon size="15px"></custom-icon>
  <custom-icon size="25px"></custom-icon>
  <custom-icon size="2050px"></custom-icon>
</div>

<custom-icon size="200px" ></custom-icon>
...