anchor-scope

Свойство anchor-scope ограничивает область применения указанных якорных имён в поддереве текущего элемента.

        
          
          .container {  anchor-scope: all;}
          .container {
  anchor-scope: all;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Свойство anchor-scope принимает в себя три типа значений:

• none — ни одно якорное имя не будет ограничено поддеревом текущего элемента. Значение по умолчанию;
• <anchor-name> — список якорных имен через запятую, видимость которых должна быть ограничена поддеревом текущего элемента. Например, --a, --b;
• all — все якорные имена в поддереве текущего элемента должны быть доступны только в рамках этого элемента.

Если значение anchor-scope будет равно none, то ни одно якорное имя не будет ограничено поддеревом текущего элемента и до них может будет "достучаться" из других частей DOM-дерева.

Если в качестве значения указать конкретные якорные имена, например, --a, --b, то только они будут ограничены поддеревом текущего элемента.

Если выбрать значение all, то все якорные имена будет видны только в рамках дерева текущего элемента.

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

Попробуем это реализовать.

Добавляем HTML-разметку.

        
          
          <ul>  <li>    <div class="anchor">Anchor 1</div>    <div class="target">Target 1</div>  </li>  <li>    <div class="anchor">Anchor 2</div>    <div class="target">Target 2</div>  </li>  <li>    <div class="anchor">Anchor 3</div>    <div class="target">Target 3</div>  </li></ul>
          <ul>
  <li>
    <div class="anchor">Anchor 1</div>
    <div class="target">Target 1</div>
  </li>
  <li>
    <div class="anchor">Anchor 2</div>
    <div class="target">Target 2</div>
  </li>
  <li>
    <div class="anchor">Anchor 3</div>
    <div class="target">Target 3</div>
  </li>
</ul>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Затем связываем таргет элементы с якорем.

        
          
          .anchor {  anchor-name: --anchor;}.target {  position: absolute;  position-anchor: --anchor;  position-area: top;}
          .anchor {
  anchor-name: --anchor;
}

.target {
  position: absolute;
  position-anchor: --anchor;
  position-area: top;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Запускаем код в браузере и видим, что на экране отображен только третий таргет элемент. Куда же подевались ещё два?

Если добавим отступов для дебага, то увидим, что, на самом деле все, три таргет элемента присутствуют на экране, просто они почему-то прикрепились к последнему якорю. Почему так происходит?

В данном примере мы использовали одно и то же якорное имя для нескольких элементов.

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

Как починить? Можно использовать уникальные имена для каждого якоря.

Но это может быть не всегда удобно, так как нужно либо заранее придумать и прописать в коде уникальные имена, либо описывать эту логику на JavaScript (чего хотелось бы избежать).

Чтобы решить подобную проблему и было придумано свойство anchor-scope, которое позволяет ограничить видимость якорного имени поддеревом конкретного элемента.

Используя свойство anchor-scope, починить нашу демку будет проще простого.

        
          
          .anchor {  anchor-name: --anchor;}.target {  position: absolute;  position-anchor: --anchor;  position-area: top;}/*  Ограничиваем область видимости якоря элементом списка.*/ul li {  anchor-scope: --anchor;}
          .anchor {
  anchor-name: --anchor;
}

.target {
  position: absolute;
  position-anchor: --anchor;
  position-area: top;
}

/*
  Ограничиваем область видимости якоря элементом списка.
*/
ul li {
  anchor-scope: --anchor;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать