Skip to content

Commit

Permalink
Enhancemenet: add :defined pseudo class, fix #4080
Browse files Browse the repository at this point in the history
Best practice for eliminating FOUC when using custom elements [1]

```css
app-drawer:not(:defined) {
  /* Pre-style, give layout, replicate app-drawer's eventual styles, etc. */
  display: inline-block;
  height: 100vh;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
```

[1]: https://developers.google.com/web/fundamentals/web-components/customelements#prestyle
  • Loading branch information
lkraav committed May 31, 2019
1 parent 41d989d commit 080a7eb
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 0 deletions.
1 change: 1 addition & 0 deletions lib/reference/keywordSets.js
Original file line number Diff line number Diff line change
Expand Up @@ -252,6 +252,7 @@ keywordSets.otherPseudoClasses = new Set([
"contains",
"current",
"default",
"defined",
"disabled",
"drop",
"empty",
Expand Down
5 changes: 5 additions & 0 deletions lib/rules/selector-pseudo-class-no-unknown/__tests__/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,11 @@ testRule(rule, {
{
code: ".test::-webkit-scrollbar-button:horizontal:decrement {}",
description: "non-standalone webkit scrollbar multiple pseudo classes"
},
{
code: "a:defined { }",
description:
"represents any element that has been defined; includes any standard element built in to the browser, and custom elements that have been successfully defined (i.e. with the CustomElementRegistry.define() method)."
}
],

Expand Down

0 comments on commit 080a7eb

Please sign in to comment.