custom-elements.json

{
  "version": "experimental",
  "tags": [
    {
      "name": "message-box",
      "path": "./src/message-box.ts",
      "description": "A simple message-box web component.",
      "properties": [
        {
          "name": "height",
          "attribute": "height",
          "description": "The height of component",
          "type": "string",
          "default": "\"initial\""
        },
        {
          "name": "width",
          "attribute": "width",
          "description": "The width of component",
          "type": "string",
          "default": "\"initial\""
        },
        {
          "name": "minWidth",
          "attribute": "min-width",
          "description": "The min-width of component",
          "type": "string",
          "default": "\"initial\""
        },
        {
          "name": "border",
          "attribute": "border",
          "description": "The `border` css property of component",
          "type": "string",
          "default": "\"0\""
        },
        {
          "name": "color",
          "attribute": "color",
          "description": "The `color` css property of component",
          "type": "string",
          "default": "\"255, 255, 255\""
        },
        {
          "name": "radius",
          "attribute": "radius",
          "description": "The `border-radius` of component",
          "type": "string",
          "default": "\"0\""
        },
        {
          "name": "shadow",
          "attribute": "shadow",
          "description": "The `box-shadow` css property of component",
          "type": "string",
          "default": "\"0, 1rem, 1rem\""
        },
        {
          "name": "out",
          "attribute": "out",
          "description": "The out method of component. one of \"right\"|\"top\".",
          "type": "string",
          "default": "\"\""
        },
        {
          "name": "timeout",
          "attribute": "timeout",
          "description": "The display time of the component.",
          "type": "string",
          "default": "\"0\""
        }
      ],
      "slots": [
        {
          "name": "message",
          "description": "The 'message' component that needs to be displayed, the most basic such as `SPAN`"
        },
        {
          "name": "button",
          "description": "`BUTTON`s that need to be displayed"
        }
      ],
      "cssParts": [
        {
          "name": "--message-box-background-color",
          "description": "Set background color of component",
          "default": "0, 0, 0"
        },
        {
          "name": "--message-box-opacity",
          "description": "Set opacity of component",
          "default": "0.8"
        }
      ]
    }
  ]
}