Блог

Главная - Вопросы по программированию - Можно ли манипулировать отображаемым DOM независимо от innerHTML в пользовательских элементах?

Можно ли манипулировать отображаемым DOM независимо от innerHTML в пользовательских элементах?

#javascript #html #css #custom-element

#javascript #HTML #css #пользовательский элемент

Вопрос:

Мне кажется, что «пользовательские элементы» должны уметь это делать.

Возможно ли создавать полностью пользовательские элементы с помощью JS customElements , чтобы отображаемое изображение полностью определялось JS (в идеале в HTML) и не обязательно было связано с DOM innerHTML

Пример из стандартного HTML

Чтобы привести пример из существующего HTML-кода, <li> DOM элемента innerHTML не представляет его отображаемую форму.

В Firefox это отображается в инспекторе следующим образом:

 <li>
  ::marker
  List item
</li>

Примеры

Если то, что я хочу, возможно, можно было бы создать пользовательский <li> , который будет вести себя следующим образом:

Учитывая HTML

 <my-li>Statement</my-li>

Затем внутренне браузер сгенерирует это:

 <div tag="my-li">
    <img selector="marker" src="bullet.svg"/>
    Statement
</div>

Затем вы можете получить доступ к пуле следующим образом:

 my-li::marker { }

Таким образом, инспектор покажет:

 <my-li>
  ::marker
  Statement
</my-li>

Аналогично, представьте это:

 <duplicate-div><button>X</button></duplicate-div>

внутренне представлено чем-то вроде

 <div tag="duplicate-div">
    <div selector="first">
        <button>X</button>
    </div>
    <div selector="second">
        <button>X</button>
    </div>
</div>

Мотивация (пожалуйста, не говорите мне, как это сделать):

Я хочу создать флажок, поскольку установка флажка по умолчанию практически невозможна, и хотел, чтобы его использование было таким же простым, как написание

 <check-box>Label</check-box>

Возможно ли что-то подобное?

Комментарии:

1.Из вашего вопроса неясно, есть ли у вас опыт работы с API пользовательских элементов. Использование вами tag атрибута указывает на то, что вы, возможно, еще не поняли основы пользовательских элементов. Частью ответа, вероятно, будет «курс» о разнице между автономными элементами и настраиваемыми встроенными элементами (последний Apple по-прежнему отказывается внедрять в Safari), так что на самом деле ответ, вероятно, будет: сначала прочитайте руководство, попробуйте какой-нибудь код, а затем возвращайтесь с любыми вопросами. developer.mozilla.org/en-US/docs/Web/Web_Components /…

Ответ №1:

Вы можете создавать пользовательские элементы и наделять их пользовательской функциональностью с помощью JavaScript. Если вы хотите custom-li , вы можете использовать этот код отсюда. Также ОЧЕНЬ ВАЖНО, что вы можете получить доступ ::marker к list-style тому, что объясняется здесь.

Комментарии:

1. Это не решает мою проблему. Суть моей проблемы заключается в том, могу ли я сделать так, чтобы отображаемая страница основывалась на внутренне сгенерированном JS DOM вместо фактического innerHTML пользовательского элемента. Кроме того, эта ::marker вещь уже существует. Вы можете использовать li::marker в CSS. Я прошу иметь возможность поддерживать его в пользовательском элементе.

2. @schuelermine Вы можете, если при создании пользовательского элемента вы используете class custom-li extends HTMLLIElement

3. Я понимаю, но я ищу более общее решение.

4. @schuelermine Я не понимаю, почему я проголосовал против. Также что вы подразумеваете под более общим решением?

5. Я полагаю, что голосование против связано с тем, что некоторые пользователи StackOverflow считают ответ просто плохой практикой ссылок. В этом случае я бы согласился; минимум, который вы можете сделать, это скопировать / вставить некоторый код из ссылок, на которые вы ссылаетесь. И не используйте ссылки «здесь», просто оставьте URI как есть, чтобы было ясно, куда ведет ссылка. В целом, ваш ответ здесь слишком прост … с таким же успехом вы могли бы сказать RTFM . Я проголосовал за, потому что вы довольно новый пользователь SO, вы должны были получить инструктивный комментарий, а не отрицательный голос.