Add the option to scope custom rules to specific selectors such as a HTML CustomElement (web component) - and provide a value list

[AasmundEndresen]

Would it be alot of work to allow the customData schema to scope properties/atRules/pseudoClasses/etc... to a specific element selector?
It would be extremely handy when working with web components to provide autocomplete for Custom Properties, parts and CustomStateSets that can be selected - but only in the context of a specific parent selector - as properties can have the same name across multiple components.

Example:

  {
  "version": 1.1,
  "selectors": [
        {
            "name": "accordion-item",
            "description": "Styles for the accordion item component",
            "properties": [
                {
                    "name": "--background-color",
                    "description": "Background color of the accordion item",
                    "values": [
                        {
                            "name": "--light",
                            "description": "Light background color"
                        },
                        {
                            "name": "--dark",
                            "description": "Dark background color"
                        },
                        {
                            "name": "--transparent",
                            "description": "Transparent background color"
                        }
                    ]
                },
                {
                    "name": "--border-bottom-size",
                    "description": "Size of the bottom border",
                    "values": [
                        {
                            "name": "--none",
                            "description": "No bottom border"
                        },
                        {
                            "name": "--small",
                            "description": "Small bottom border"
                        },
                        {
                            "name": "--medium",
                            "description": "Medium bottom border"
                        },
                        {
                            "name": "--large",
                            "description": "Large bottom border"
                        }
                    ]
                },
                {
                    "name": "--border-color",
                    "description": "Color of the border",
                    "values": [
                        {
                            "name": "--light",
                            "description": "Light border color"
                        },
                        {
                            "name": "--dark",
                            "description": "Dark border color"
                        },
                        {
                            "name": "--primary",
                            "description": "Primary border color"
                        }
                    ]
                },
                {
                    "name": "--border-size",
                    "description": "Size of the border",
                    "values": [
                        {
                            "name": "--none",
                            "description": "No border"
                        },
                        {
                            "name": "--small",
                            "description": "Small border"
                        },
                        {
                            "name": "--medium",
                            "description": "Medium border"
                        },
                        {
                            "name": "--large",
                            "description": "Large border"
                        }
                    ]
                }
            ]
        }
    ]
}