Да, я знаю, вы и не думали соединить эти слова вместе для отличного SEO. Нет, уверяю вас, это реальная вещь, благодаря этому забавному вопросу, возникшему как идея от Пола Хиббитса, педагога, который любит Doxify / GravCMS. Идея заключалась в том, чтобы дать возможность пользователям (или разработчику) отправлять ссылки людям с отключенными частями пользовательского интерфейса. У этого есть несколько возможных вариантов использования:
- Быстрое A/B тестирование «вещь» против «не вещь
- Позволяет удалять ссылки на общий доступ и другие отвлекающие элементы
- Позволяет удалять части пользовательского интерфейса при встраивании в iframe.
Чтобы достичь этого, я смешал несколько интересных решений. Во-первых, мы разрешаем параметр поиска URL, например, такой welcome-page?disable-features=footer,site-menu-content. Мы можем разобрать это в строку следующим образом
const urlParams = new URLSearchParams(window.location.search);
const disableFeatures = urlParams.get("disable-features");
if (disableFeatures != null) {
this.disableFeatures = disableFeatures;
}
Это позволяет нам установить внутреннее свойство disableFeatures в нашем веб-компоненте на основе местоположения поиска URL. В LitElement мы затем отражаем этот атрибут, чтобы мы могли делать CSS селекторы, такие как этот haxcms-site-builder[disable-features="thing"].
Понимание *=
Читая страницу Moz Doc о селекторах атрибутов, мы видим селектор *=, который гласит:
Представляет элементы с именем атрибута attr, значение которого содержит хотя бы одно вхождение value в строку.
Это означает, что если у нас есть things,and,stuff, то мы можем успешно подобрать *="and". Используя эти знания, мы можем создать селектор, например: haxcms-site-builder[disable-features*="site-menu-content"] и успешно нацелиться на это условие URL.
Покажите мне теневые части
Синтаксис ::part + атрибут — относительный новичок в спецификации HTML. Он позволяет нацеливаться на части элементов, которые находятся в теневых корнях других элементов, чтобы обеспечить специфическую стилизацию.
haxcms-site-builder[disable-features*="site-menu"] .haxcms-theme-element::part(site-menu)
Комбинируя эти подходы, мы получаем решение, подобное этому, которое может успешно позволить (умным) пользователям нацеливать и отключать части пользовательского интерфейса через параметр URL, при этом безопасно позволяя нацеливать только те части, которые мы разрешаем.
TLDR веселое видео
Вы получили это
Полный селектор CSS
haxcms-site-builder[disable-features*="site-menu"] .haxcms-theme-element::part(site-menu),
haxcms-site-builder[disable-features*="page-breadcrumb"] .haxcms-theme-element::part(page-breadcrumb),
haxcms-site-builder[disable-features*="print-branch-btn"] .haxcms-theme-element::part(print-branch-btn),
haxcms-site-builder[disable-features*="rss-btn"] .haxcms-theme-element::part(rss-btn),
haxcms-site-builder[disable-features*="git-corner-btn"] .haxcms-theme-element::part(git-corner-btn),
haxcms-site-builder[disable-features*="search-btn"] .haxcms-theme-element::part(search-btn),
haxcms-site-builder[disable-features*="site-menu-content"] .haxcms-theme-element::part(site-menu-content),
haxcms-site-builder[disable-features*="footer"] .haxcms-theme-element::part(footer),
haxcms-site-builder[disable-features*="qr-code-btn"] .haxcms-theme-element::part(qr-code-btn),
haxcms-site-builder[disable-features*="right-col"] .haxcms-theme-element::part(right-col),
haxcms-site-builder[disable-features*="left-col"] .haxcms-theme-element::part(left-col)
{
display: none !important;
}