Built-in elements

Gem provides some commonly used custom elements, they are not built-in by default, you need to manually introduce them yourself:

import { html } from '@mantou/gem'; import '@mantou/gem/elements/link'; html`<gem-link path="/page"></gem-link>`;

Similar to <a>, support route.

Name Description
GemLinkElement Bug: can't print <link>
GemActiveLinkElement

Name Description
GemLinkElement Bug: can't print <link>
GemActiveLinkElement

<gem-route>

Provide routing matching, can be nested.

Name Description
matchPath - 大小写敏感
- 匹配成功时返回 params
- 以 / 结尾时能不带 / 结尾的路径
- * 匹配到的 params 名称为数字
createPath
createHistoryParams
GemLightRouteElement
GemRouteElement

Name Description
matchPath - 大小写敏感
- 匹配成功时返回 params
- 以 / 结尾时能不带 / 结尾的路径
- * 匹配到的 params 名称为数字
createPath
createHistoryParams
GemLightRouteElement
GemRouteElement

<gem-light-route>

Name Description
matchPath - 大小写敏感
- 匹配成功时返回 params
- 以 / 结尾时能不带 / 结尾的路径
- * 匹配到的 params 名称为数字
createPath
createHistoryParams
GemLightRouteElement
GemRouteElement

<gem-title>

Update document.title or display it where you need it.

Name Description
GemTitleElement

<gem-use>

SVG-like <use>.

Name Description
GemUseElement svg 中的 <use> 不能穿透 ShadowDOM,
此元素用来模拟 <use>,
由于是复制元素，所以不能像 <use> 一样自动更新
slot 支持为 icon 添加效果，如涟漪，徽章

<gem-reflect>

Render the content to the specified element.

Name Description
GemReflectElement

<gem-gesture>

Support pan, pinch, rotate, swipe, press, end gesture event.

Name Description
GemGestureElement 块级元素，如果要设置成 contents，则内容块要设置 touch-action: none
https://javascript.info/pointer-events#event-pointercancel
在移动端上，必须设置 touch-action 以允许滚动等原生动作

<gem-unsafe>

Render the string directly into content.

Name Description
GemUnsafeElement

Other

There are modules for developing element related to the history stack:

Module Description
createModalClass A function that can generate a static class that can display UI
DialogBaseElement A class based on which to create Dialog elements