fix(decorators): patch container-responsive styles to fix stale container queries and add customElement wrapper that sets .is and warns on class/tag mismatch
This commit is contained in:
25
ts/decorators.customelement.ts
Normal file
25
ts/decorators.customelement.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { customElement as litCustomElement } from 'lit/decorators/custom-element.js';
|
||||
|
||||
const camelToKebab = (name: string) =>
|
||||
name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
|
||||
|
||||
export function customElement(tagName: string) {
|
||||
return (classOrTarget: any, context?: any) => {
|
||||
// Set .is so that other decorators and utilities can read the tag name
|
||||
classOrTarget.is = tagName;
|
||||
|
||||
// Warn if class name convention doesn't match the tag
|
||||
if (classOrTarget.name) {
|
||||
const derived = camelToKebab(classOrTarget.name);
|
||||
if (derived !== tagName) {
|
||||
console.warn(
|
||||
`[dees-element] Class "${classOrTarget.name}" kebab-cases to "${derived}" but tag is "${tagName}". ` +
|
||||
`Container queries use .is ("${tagName}").`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Delegate to Lit's original decorator
|
||||
return litCustomElement(tagName)(classOrTarget, context);
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user