URL 검색 매개변수를 통해 CSS 그림자 부분 타겟팅

네, 알아요. 당신의 젤리는 훌륭한 SEO를 위해 그 단어들을 함께 섞을 것이라고 생각하지 않았습니다. 아니요, this fun issue이 Doxify/GravCMS를 좋아하는 교육자 Paul Hibbits의 아이디어로 제공한 실제 제품임을 확신합니다. 아이디어는 사용자(또는 개발자)가 UI의 일부가 비활성화된 사람들에게 링크를 보낼 수 있도록 하는 것이었습니다. 여기에는 몇 가지 가능한 사용 사례가 있습니다.

사물과 사물이 아닌 것에 대한 빠른 A/B 테스트

공유 링크 및 기타 방해 요소 제거 허용

iframe에 삽입할 때 UI의 일부를 제거할 수 있습니다

.

이를 달성하기 위해 몇 가지 흥미로운 솔루션을 혼합했습니다. 먼저 다음과 같은 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;
}

이렇게 하면 URL의 검색 위치를 기반으로 웹 구성 요소에서 내부disableFeatures 속성을 설정할 수 있습니다. 그런 다음 LitElement에서 해당 속성reflect을 사용하여 이와 같은 CSS 선택기를 수행할 수 있습니다haxcms-site-builder[disable-features="thing"].

이해 *=

Moz Doc page on attribute selectors을 읽으면 다음과 같이 말하는 *= 선택기가 표시됩니다.

Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.

즉, things,and,stuff가 있으면 *="and"를 성공적으로 일치시킬 수 있습니다. 이 지식을 사용하여 haxcms-site-builder[disable-features*="site-menu-content"]와 같은 선택기를 만들고 해당 URL 조건을 성공적으로 타겟팅할 수 있습니다.

그림자 부분을 보여주세요

::part syntax + attribute 은 HTML 사양에 상대적으로 새로운 항목입니다. 특정 스타일을 제공하기 위해 다른 요소의 shadowRoots 내에 있는 요소의 일부를 대상으로 지정할 수 있습니다.
haxcms-site-builder[disable-features*="site-menu"] .haxcms-theme-element::part(site-menu)
이러한 접근 방식을 결합하면 (스마트한) 사용자가 URL 매개 변수를 통해 UI의 일부를 대상으로 지정하고 비활성화할 수 있는 동시에 우리가 허용하는 대상만 안전하게 허용할 수 있는 솔루션을 얻을 수 있습니다.

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;
}