CSS-селектор для частичного имени узла CustomElement - PullRequest
Новая
       21

CSS-селектор для частичного имени узла CustomElement

1 голос
/ 04 апреля 2019

Обновление: Пошёл для другого решения:

<img is=queen-of-hearts>

Live at: https://card -ts.github.io / playingcardts

этот вопрос касается обхода ограничений CSS Selector

Итак, мои пользовательские элементы теперь создают истинный смысловой HTML:

Отображение:

нет внешних файлов SVG,
все 500 КБ SVG (вручную) уменьшены, а LZMA упакована до 70 КБ в ОДИН Пользовательский элемент
все 52 карты (пользовательские элементы) затем создаются с фабричным кодом класса Supersharps

Следующая проблема возникает ... Какие селекторы использовать?

Я могу сделать : 
    Queen-of-Hearts {
      transform: rotate(20deg)
    }

Но чтобы выделить каждого Короля, следующего за Королевой (только один выше), CSS становится многословным: 

        Queen-of-Spades+King-of-Spades,
        Queen-of-Hearts+King-of-Hearts,
        Queen-of-Diamonds+King-of-Diamonds,
        Queen-of-Clubs+King-of-Clubs,

        Queen-of-Hearts+King-of-Spades,
        Queen-of-Hearts+King-of-Hearts,
        Queen-of-Hearts+King-of-Diamonds,
        Queen-of-Hearts+King-of-Clubs,

        Queen-of-Diamonds+King-of-Spades,
        Queen-of-Diamonds+King-of-Hearts,
        Queen-of-Diamonds+King-of-Diamonds,
        Queen-of-Diamonds+King-of-Clubs,

        Queen-of-Clubs+King-of-Spades,
        Queen-of-Clubs+King-of-Hearts,
        Queen-of-Clubs+King-of-Diamonds,
        Queen-of-Clubs+King-of-Clubs {
            transform: scale(1.2);
            border: 1px solid green;
        }

Я хотел бы написать CSS как: 

    Queen* + King* {
            transform: scale(1.2);
            border: 1px solid green;
    }

  • Множество jQuery ответов для «частичных селекторов», вокруг которых просто выполняют поиск методом грубой силы с помощью JS

  • Я искал Селекторы CSS4 , ничего, что бросается в глаза

  • Я могу (также довольно грубо) создать все правила CSS с помощью JS

  • Является ли единственной альтернативой игнорировать атрибуты nonameame и add (data) или имена классов?

Примечание: У меня есть версия, которая делает <Queen-of-Hearts rank="Queen" suit="Hearts" />
Но это не так семантически «приятно»

Заинтересованы в любых указателях для элегантного решения для захвата правил пасьянса или покера в CSS,
без ограничений браузера,
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * '' * 10 "*" с удовольствием изучаем возможности браузера " проект ...
после очистки будет на GitHub

Обновление

Пошло с обозначением, которое мы пропустили: расширение встроенного элемента:

<img is=queen-of-hearts>

  • Его автоматическое закрытие
  • это один элемент DOM
  • можно получить с помощью селекторов CSS img[is*=queen]
  • Единственное ограничение: = должно быть в нижнем регистре ...

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

<card-t cid=Queen-of-Hearts></card-t>

Оба (я должен сказать, 53 элемента) включены в один файл размером 16 КБ:

https://card -ts.github.io / playingcardts

1 Ответ

0 голосов
/ 05 апреля 2019

Если вы, наконец, решите использовать уникальное имя пользовательского элемента, предложенное Connexo, возможно, было бы полезно оставить атрибуты named для определения ранга и масти. 

<playing-card rank="Queen" suit="Hearts">

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

card.rank === card.getAttribute( 'rank' )

Таким образом было бы легче найти значение карты, чем если бы вы использовали атрибуты в качестве значений .

Рассмотрим следующие обозначения: 

<playing-card queen hearts></playing-card>

Проблема: каково ее значение? 

let card = game.querySelector( 'playing-card' )    
if ( card.getAttribute( 'spades ') )
     suit = spades
else if ( card.getAttributes( 'diamonds' ) )
     ...

В качестве альтернативы, вы можете использовать один атрибут name:

html 

<playing-card name="10-of-spades">

javascript 

//easy manipulation
let card = document.querySelector( 'playing-card' ) 
let [rank, suit] = card.name.split( '-of-' )

css 

//easy selection (...for advanced CSS users)
[name|=king] + [name|=queen]  //Queens after a King
[name|=1]                     //Aces
[name$=spades]                //Spades
...