CSS阴影零件/h1>
CSS阴影零件使开发人员可以在阴影树内部的元素上设计CSS属性。这对于自定义离子框架非常有用betway东盟体育app
影子穹顶/a>
成分。/p>
为什么要阴影零件?/a>
betway东盟体育app离子框架是一组分布式的
Web组件/a>
。网络组件遵循
阴影dom规范/a>
为了封装样式和标记。/p>
betway东盟体育app离子框架组件是
不是全部/strong>
阴影DOM组件。如果该组件是阴影DOM组件,则其右上角将有一个徽章
组件文档/a>
。阴影DOM组件的一个示例是
按钮组件/a>
。/p>
Shadow Dom可用于防止样式泄漏出组件并无意间应用于其他元素。例如,我们分配一个
。按钮/code>
上课
离子巴顿/code>
零件。没有暗影DOM封装,如果用户要设置类
。按钮/code>
在其自己的元素之一上,它将继承离子框架按钮样式。betway东盟体育app自从
离子巴顿/code>
是阴影组件,这不是问题。/p>
但是,由于这种封装,样式也无法流血成阴影组件的内部元素。这意味着,如果阴影组件在其阴影树内呈现元素,则不能直接用CSS来靶向内部元素。使用
离子选择/code>
组件为例,它呈现以下标记:/p>
<//span>
离子选择/span>
>//span>
#影子根
<//span>
div/span>
班级/span>
=//span>
”选择文本/span>
选拔者”/span>
>//span>
//span>
div/span>
>//span>
<//span>
div/span>
班级/span>
=//span>
“ select-icon”/span>
>//span>
//span>
div/span>
>//span>
//span>
离子选择/span>
>//span>
占位符文字和图标元素在
#影子根/code>
,这意味着以下CSS将
不是/strong>
努力为占位符设计:/p>
/ *不起作用 *//span>
离子选择。选择位置/span>
{//span>
颜色/span>
:/span>
蓝色的
;/span>
}//span>
那么我们如何解决这个问题?
CSS阴影零件/a>
呢/p>
阴影部分解释了/a>
阴影零件使开发人员可以从阴影树外面的阴影树中造型。为此,
部分必须暴露/a>
然后可以通过使用
::部分/a>
。/p>
暴露零件/a>
创建阴影DOM组件时,可以通过分配一个
部分/code>
元素上的属性。这是在离子框架中添加到组件中的,并且不需要最终用户的操作。betway东盟体育app//p>
继续使用
离子选择/code>
组件为例,标记已更新为如下:/p>
<//span>
离子选择/span>
>//span>
#影子根
<//span>
div/span>
部分/span>
=//span>
“占位符”/span>
班级/span>
=//span>
”选择文本/span>
选拔者”/span>
>//span>
//span>
div/span>
>//span>
<//span>
div/span>
部分/span>
=//span>
“图标”/span>
班级/span>
=//span>
“ select-icon”/span>
>//span>
//span>
div/span>
>//span>
//span>
离子选择/span>
>//span>
以上显示了两个部分:
占位符/code>
和
图标/code>
。看到
选择文档/a>
对于所有部分。/p>
这些零件暴露了,现在可以使用该元素直接使用
::部分/a>
。/p>
如何::部分工作/a>
这
::部分()/code>
伪元素使开发人员可以选择通过零件属性暴露的阴影树内部的元素。/p>
因为我们知道
离子选择/code>
暴露
占位符/code>
用于在未选择值的文本时进行造型的部分,我们可以以以下方式自定义文本:/p>
离子选择:: part(占位符)/span>
{//span>
颜色/span>
:/span>
蓝色的
;/span>
不透明度/span>
:/span>
1
;/span>
}//span>
造型使用
::部分/code>
允许更改该元素接受的任何CSS属性。/p>
除了能够针对零件之外,
伪元素/a>
可以在没有明确暴露的情况下进行样式设计:/p>
离子选择:: part(占位符)::第一通信/span>
{//span>
字体大小/span>
:/span>
22px
;/span>
字体重量/span>
:/span>
500
;/span>
}//span>
零件与大多数
伪级/a>
,也:/p>
离子元素:: part(本地):悬停/span>
{//span>
颜色/span>
:/span>
绿色
;/span>
}//span>
有一些已知限制
供应商的前缀伪元素/a>
和
结构伪级/a>
。/p>
betway东盟体育app离子框架零件/a>
离子框架组件的所有暴露零件都可以在其API页面的Cbetway东盟体育appSS阴影零件下找到。要查看所有组件及其API页面,请参阅
组件文档/a>
。/p>
为了拥有零件,组件必须符合以下标准:/p>
-
它是一个
影子穹顶/a>
零件。如果是
范围/a>
或光DOM分量,可以将子元素直接靶向。如果组件是范围或阴影的,则将其名称列出
组件文档页面/a>
。/li>
-
它包含儿童元素。例如,
离子卡头/code>
是阴影组件,但所有样式都应用于主机元素。由于它没有子元素,因此不需要零件。//li>
-
儿童元素不是结构性的。在某些组件中,包括
离子标题/code>
,子元素是用于定位内部元素的结构元素。我们不建议自定义结构元素,因为这可能会产生意外的结果。//li>
我们欢迎有关其他零件的建议。请创建一个
新的GitHub问题/a>
请求零件时尽可能多的信息。/p>
已知限制/a>
浏览器支持/a>
CSS影子零件在所有主要浏览器的最新版本中得到了支持。但是,一些较旧版本不支持影子零件。验证
浏览器支持/a>
在应用程序中实施零件之前,请满足要求。如果需要对较旧版本的浏览器支持,我们建议继续使用
CSS变量/a>
用于造型。/p>
供应商的前缀伪元素/a>
供应商前缀/a>
目前不支持伪元素。一个例子就是
:: - Webkit-Scrollbar/code>
伪元素:/p>
/ *不起作用 *//span>
my-component :: part(scroll):: - webkit-scrollbar/span>
{//span>
背景/span>
:/span>
绿色
;/span>
}//span>
看
在Github上的这个问题/a>
了解更多信息。/p>
结构伪级/a>
但是,大多数伪级都受到零件的支持
结构伪级/a>
不是。下面不起作用的结构伪级的一个例子。//p>
/ *不起作用 *//span>
my-component :: part(容器):第一童/span>
{//span>
背景/span>
:/span>
绿色
;/span>
}//span>
/ *不起作用 *//span>
my-component :: part(容器):最后一个孩子/span>
{//span>
背景/span>
:/span>
绿色
;/span>
}//span>
链接零件/a>
这
::部分()/code>
伪元素不能匹配附加
::部分()/code>
s。/p>
例如,
my-component :: part(button):: part(label)/code>
不匹配任何东西。这是因为这样做将暴露更多的结构信息。//p>
如果是
/code>
的内部按钮使用类似
part =“ label =>按钮标签”/code>
将按钮的内部部件转发到面板自己的部分元素映射中,然后选择一个选择器
my-component :: part(按钮标签)/code>
将仅选择一个按钮的标签,忽略任何其他标签。/p>
以前的/div>
CSS变量/span>
下一个/div>
颜色/span>
CSS阴影零件使开发人员可以在阴影树内部的元素上设计CSS属性。这对于自定义离子框架非常有用betway东盟体育app
影子穹顶/a>
成分。/p>
betway东盟体育app离子框架是一组分布式的
Web组件/a>
。网络组件遵循
阴影dom规范/a>
为了封装样式和标记。/p>
betway东盟体育app离子框架组件是
不是全部/strong>
阴影DOM组件。如果该组件是阴影DOM组件,则其右上角将有一个徽章
组件文档/a>
。阴影DOM组件的一个示例是
按钮组件/a>
。/p>
Shadow Dom可用于防止样式泄漏出组件并无意间应用于其他元素。例如,我们分配一个
但是,由于这种封装,样式也无法流血成阴影组件的内部元素。这意味着,如果阴影组件在其阴影树内呈现元素,则不能直接用CSS来靶向内部元素。使用
占位符文字和图标元素在
那么我们如何解决这个问题?
CSS阴影零件/a>
呢/p>
阴影零件使开发人员可以从阴影树外面的阴影树中造型。为此,
部分必须暴露/a>
然后可以通过使用
::部分/a>
。/p>
创建阴影DOM组件时,可以通过分配一个
继续使用
以上显示了两个部分:
这些零件暴露了,现在可以使用该元素直接使用
::部分/a>
。/p>
这
因为我们知道
造型使用
除了能够针对零件之外,
伪元素/a>
可以在没有明确暴露的情况下进行样式设计:/p>
零件与大多数
伪级/a>
,也:/p>
有一些已知限制
供应商的前缀伪元素/a>
和
结构伪级/a>
。/p>
离子框架组件的所有暴露零件都可以在其API页面的Cbetway东盟体育appSS阴影零件下找到。要查看所有组件及其API页面,请参阅
组件文档/a>
。/p>
为了拥有零件,组件必须符合以下标准:/p>
我们欢迎有关其他零件的建议。请创建一个
新的GitHub问题/a>
请求零件时尽可能多的信息。/p>
CSS影子零件在所有主要浏览器的最新版本中得到了支持。但是,一些较旧版本不支持影子零件。验证
浏览器支持/a>
在应用程序中实施零件之前,请满足要求。如果需要对较旧版本的浏览器支持,我们建议继续使用
CSS变量/a>
用于造型。/p>
供应商前缀/a>
目前不支持伪元素。一个例子就是
看
在Github上的这个问题/a>
了解更多信息。/p>
但是,大多数伪级都受到零件的支持
结构伪级/a>
不是。下面不起作用的结构伪级的一个例子。//p>
这
例如,
如果是
为什么要阴影零件?/a>
。按钮/code>
上课
离子巴顿/code>
零件。没有暗影DOM封装,如果用户要设置类
。按钮/code>
在其自己的元素之一上,它将继承离子框架按钮样式。betway东盟体育app自从
离子巴顿/code>
是阴影组件,这不是问题。/p>
离子选择/code>
组件为例,它呈现以下标记:/p>
<//span>
离子选择/span>
>//span>
#影子根
<//span>
div/span>
班级/span>
=//span>
”选择文本/span>
选拔者”/span>
>//span>
//span>
div/span>
>//span>
<//span>
div/span>
班级/span>
=//span>
“ select-icon”/span>
>//span>
//span>
div/span>
>//span>
//span>
离子选择/span>
>//span>
#影子根/code>
,这意味着以下CSS将
不是/strong>
努力为占位符设计:/p>
/ *不起作用 *//span>
离子选择。选择位置/span>
{//span>
颜色/span>
:/span>
蓝色的
;/span>
}//span>
阴影部分解释了/a>
暴露零件/a>
部分/code>
元素上的属性。这是在离子框架中添加到组件中的,并且不需要最终用户的操作。betway东盟体育app//p>
离子选择/code>
组件为例,标记已更新为如下:/p>
<//span>
离子选择/span>
>//span>
#影子根
<//span>
div/span>
部分/span>
=//span>
“占位符”/span>
班级/span>
=//span>
”选择文本/span>
选拔者”/span>
>//span>
//span>
div/span>
>//span>
<//span>
div/span>
部分/span>
=//span>
“图标”/span>
班级/span>
=//span>
“ select-icon”/span>
>//span>
//span>
div/span>
>//span>
//span>
离子选择/span>
>//span>
占位符/code>
和
图标/code>
。看到
选择文档/a>
对于所有部分。/p>
如何::部分工作/a>
::部分()/code>
伪元素使开发人员可以选择通过零件属性暴露的阴影树内部的元素。/p>
离子选择/code>
暴露
占位符/code>
用于在未选择值的文本时进行造型的部分,我们可以以以下方式自定义文本:/p>
离子选择:: part(占位符)/span>
{//span>
颜色/span>
:/span>
蓝色的
;/span>
不透明度/span>
:/span>
1
;/span>
}//span>
::部分/code>
允许更改该元素接受的任何CSS属性。/p>
离子选择:: part(占位符)::第一通信/span>
{//span>
字体大小/span>
:/span>
22px
;/span>
字体重量/span>
:/span>
500
;/span>
}//span>
离子元素:: part(本地):悬停/span>
{//span>
颜色/span>
:/span>
绿色
;/span>
}//span>
betway东盟体育app离子框架零件/a>
离子卡头/code>
是阴影组件,但所有样式都应用于主机元素。由于它没有子元素,因此不需要零件。//li>
离子标题/code>
,子元素是用于定位内部元素的结构元素。我们不建议自定义结构元素,因为这可能会产生意外的结果。//li>
已知限制/a>
浏览器支持/a>
供应商的前缀伪元素/a>
:: - Webkit-Scrollbar/code>
伪元素:/p>
/ *不起作用 *//span>
my-component :: part(scroll):: - webkit-scrollbar/span>
{//span>
背景/span>
:/span>
绿色
;/span>
}//span>
结构伪级/a>
/ *不起作用 *//span>
my-component :: part(容器):第一童/span>
{//span>
背景/span>
:/span>
绿色
;/span>
}//span>
/ *不起作用 *//span>
my-component :: part(容器):最后一个孩子/span>
{//span>
背景/span>
:/span>
绿色
;/span>
}//span>
链接零件/a>
::部分()/code>
伪元素不能匹配附加
::部分()/code>
s。/p>
my-component :: part(button):: part(label)/code>
不匹配任何东西。这是因为这样做将暴露更多的结构信息。//p>
part =“ label =>按钮标签”/code>
将按钮的内部部件转发到面板自己的部分元素映射中,然后选择一个选择器
my-component :: part(按钮标签)/code>
将仅选择一个按钮的标签,忽略任何其他标签。/p>