Add ignore: ["custom-elements"] to selector-max-type

lib/rules/selector-max-type/README.md

@@ -77,7 +77,7 @@ div a .foo:not(span) {}
 
 ## Optional secondary options
 
-### `ignore: ["child", "compounded", "descendant", "next-sibling"]`
+### `ignore: ["child", "compounded", "descendant", "next-sibling", "custom-elements"]`
 
 #### `"child"`
 
@@ -151,6 +151,24 @@ div a + span {}
 #bar + div + span + a + span {}
 ```
 
+#### `"custom-elements"`
+
+Allow custom elements.
+
+The following patterns are considered problems:
+
+<!-- prettier-ignore -->
+```css
+x-Foo {}
+```
+
+The following patterns are _not_ considered problems:
+
+<!-- prettier-ignore -->
+```css
+x-foo {}
+```
+
 ### `ignoreTypes: ["/regex/", /regex/, "non-regex"]`
 
 Given:

lib/rules/selector-max-type/__tests__/index.js

@@ -489,6 +489,44 @@ testRule({
 	],
 });
 
+testRule({
+	//TODO
+	ruleName,
+	config: [0, { ignore: ['custom-elements'] }],
+
+	accept: [
+		{
+			code: 'x-foo {}',
+			description: 'custom element',
+		},
+		{
+			code: '.foo x-foo {}',
+			description: 'class and custom element',
+		},
+		{
+			code: 'custom-element::part(foo) {}',
+			description: 'shadow parts',
+		},
+	],
+
+	reject: [
+		{
+			code: 'x-Foo {}',
+			description: 'invalid custom element',
+			message: messages.expected('x-Foo', 0),
+			line: 1,
+			column: 1,
+		},
+		{
+			code: 'x-foo div {}',
+			description: 'custom element and type',
+			message: messages.expected('x-foo div', 0),
+			line: 1,
+			column: 1,
+		},
+	],
+});
+
 testRule({
 	ruleName,
 	config: [0, { ignore: ['compounded', 'descendant'] }],

lib/rules/selector-max-type/index.js

@@ -14,6 +14,7 @@ const resolvedNestedSelector = require('postcss-resolve-nested-selector');
 const ruleMessages = require('../../utils/ruleMessages');
 const validateOptions = require('../../utils/validateOptions');
 const { isRegExp, isString } = require('../../utils/validateTypes');
+const isCustomElement = require('../../utils/isCustomElement');
 
 const ruleName = 'selector-max-type';
 
@@ -41,7 +42,7 @@ const rule = (primary, secondaryOptions) => {
 			{
 				actual: secondaryOptions,
 				possible: {
-					ignore: ['descendant', 'child', 'compounded', 'next-sibling'],
+					ignore: ['descendant', 'child', 'compounded', 'next-sibling', 'custom-elements'],
 					ignoreTypes: [isString, isRegExp],
 				},
 				optional: true,
@@ -56,6 +57,7 @@ const rule = (primary, secondaryOptions) => {
 		const ignoreChild = optionsMatches(secondaryOptions, 'ignore', 'child');
 		const ignoreCompounded = optionsMatches(secondaryOptions, 'ignore', 'compounded');
 		const ignoreNextSibling = optionsMatches(secondaryOptions, 'ignore', 'next-sibling');
+		const ignoreCustomElements = optionsMatches(secondaryOptions, 'ignore', 'custom-elements');
 
 		/**
 		 * @param {import('postcss-selector-parser').Container<unknown>} selectorNode
@@ -88,6 +90,10 @@ const rule = (primary, secondaryOptions) => {
 					return total;
 				}
 
+				if (ignoreCustomElements && childNode.value && isCustomElement(childNode.value)) {
+					return total;
+				}
+
 				if (childNode.type === 'tag' && !isStandardSyntaxTypeSelector(childNode)) {
 					return total;
 				}