Почему Svelte не ограничивает тег под классом, а использует отдельный tag.class для стилизации компонента? - PullRequest
Новая
       5

Почему Svelte не ограничивает тег под классом, а использует отдельный tag.class для стилизации компонента?

0 голосов
/ 04 февраля 2020

Когда у компонента есть несколько стилей CSS, естественно использовать 

.my-component-01 h1 { ... }
.my-component-01 h2 { ... }

для охвата стилей, но Svelte использует 

h1.svelte-hlsza1{color:orange}
h2.svelte-hlsza1{background:yellow}

Действительно ли он более устойчив вместо этого поместите его в определенный класс (верхний метод), потому что по крайней мере внутри разметки HTML скомпилированный код может быть просто: 

<div class="svelte-hlsza1">
  <h1> ...
  <h2> ...

вместо повторения имени класса каждый раз. (и я думаю, что специфика та же: 1 класс и 1 имя тега).

Ответы [ 2 ]

4 голосов
/ 04 февраля 2020

Поскольку для Svelte не требуется ни одного элемента верхнего уровня. 

<!-- no problem for Svelte -->
<h1>...</h1>
<h2>...</h2>

На самом деле он вообще не требует элементов. 

<script>...</script>
<!-- this is the end of the component (still no problem for Svelte) -->

Что угодно ... Без Для элемента root стратегия единого класса переноса неприменима.

Кроме того, при этом будет применяться не только текущий компонент, но и текущий компонент и его дочерние элементы . Рассмотрим этот пример: 

<!-- Scoped.svelte -->
<style>
   span { color: red }
</style>

<div>
  <span>I should be red</span>
</div>

<slot />

<!-- App.svelte -->
<script>
  import Scoped from './Scoped.svelte'
</script>

<Scoped>
  <span>I should not be red</span>
</Scoped>

<span> в App.svelte является , а не частью компонента Scoped, но он является его дочерним элементом в DOM.

Примечание: если вы хотите получить доступ к текущему компоненту и его дочерним элементам, уловка заключается в использовании псевдоселектора :global: 

<style>
  /* note that you do need a wrapping element, this time, to do that */
  div :global(span) { color: blue }
</style>

Стиль селектора div становится ограниченным, поэтому мы нацеливаемся только на дочерние элементы этого компонента (по DOM), но не выше.

1 голос
/ 04 февраля 2020

Вы правы, что уровень специфичности тот же, но это правило: 

.my-component-01 h1 { ... }

предполагает, что есть элемент, который оборачивает h1, в Svelte это никогда не имеет место. Не существует родительского элемента HTML по умолчанию для компонентов, и его не должно быть.

Если вы проверяете это, например, REPL ; несмотря на то, что один из тегов h1 происходит из импортированного компонента, оба тега h1 находятся рядом друг с другом в скомпилированной разметке следующим образом: 

<body>
  <h1 class="svelte-1k0q8ta">This is green</h1>
  <h1 class="svelte-1wsvnfu">This is red</h1>
</body>

Если бы это было так, то Svelte пришлось бы измените скомпилированную разметку, чтобы она выглядела примерно так: 

<body>
  <someelement class="my-component-01">
    <h1>This is green</h1>
  </someelement>
  <someelement class="my-component-02">
    <h1>This is red</h1>
  </someelement>
</body>

Это может привести к непредсказуемым результатам при использовании css -flex или grid, которые зависят от отношений родитель-потомок. Поэтому, хотя повторяющиеся имена классов для элементов могут раздражать тех, кто часто проверяет браузер (большинство пользователей этого не делают), это неизбежное зло, которое позволяет CSS работать как положено.

...