CSS阴影部件/h1>
CSS阴影零件允许开发人员在影子树中的元素上进行样式CSS属性。这在定制离子框架方面非常有用betway东盟体育appa href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM" target="_blank" rel="noopener noreferrer" c-id="168.11.5.1">
阴影DOM/a>
成分。/p>
为什么暗影零件?/a>
betway东盟体育app离子框架是一种分布式组a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank" rel="noopener noreferrer" c-id="168.23.5.1">
Web组件/a>
。Web组件跟随a href="https://w3c.github.io/webcomponents/spec/shadow/" target="_blank" rel="noopener noreferrer" c-id="168.26.5.3">
影子DOM规范/a>
为了封装样式和标记。/p>
betway东盟体育app离子框架组件是strong c-id="168.34.6.1">
不是所有的/strong>
影子DOM组件。如果组件是Shadow DOM组件,则会在其右上角有一个徽章a href="//www.jesscamp.com/docs/components" target="_blank" rel="noopener noreferrer" c-id="168.37.6.3">
组件文档/a>
。Shadow DOM组件的示例是a href="//www.jesscamp.com/docs/api/button" target="_blank" rel="noopener noreferrer" c-id="168.40.6.5">
按钮组件/a>
。/p>
Shadow DOM对于防止样式泄漏出组件并无意地申请其他元素是有用的。例如,我们分配了一个code c-id="168.47.5.1">
。按钮/code>
班上我们code c-id="168.50.5.3">
离子按钮/code>
零件。如果用户设置了类,则没有暗影DOM封装code c-id="168.53.5.5">
。按钮/code>
在他们自己的一个元素上,它将继承离子框架按钮样式。betway东盟体育app自从code c-id="168.56.5.7">
离子按钮/code>
是一个阴影组成部分,这不是问题。/p>
但是,由于这种封装,风格不能渗入阴影组件的内部元素。这意味着如果阴影组件呈现其阴影树内的元素,则内部元素不能直接与CSS定位。使用code c-id="168.62.5.1">
离子选择/code>
组件作为示例,它呈现以下标记:/p>
离子选择/span>
>
#暗影根span class="token tag" c-id="168.78.7.2">
div/span>
班级/span>
=
“选择文本/span>
选择占位符“/span>
>
/span>
div/span>
>
div/span>
班级/span>
=
“选择图标”/span>
>
/span>
div/span>
>
/span>
离子选择/span>
>
占位符文本和图标元素在内部code c-id="168.136.5.1">
#暗影根/code>
,这意味着以下CSS将strong c-id="168.139.5.3">
不是/strong>
努力风格占位符:/p>
/ *不起作用* //span>
离子选择。选择 - 占位符/span>
{
颜色/span>
:/span>
蓝色span class="token punctuation" c-id="168.161.7.9">
;/span>
}
那么我们如何解决这个问题?a href="#shadow-parts-explained" c-id="168.170.5.1">
CSS阴影部件/a>
!/p>
阴影部件解释说明/a>
阴影部件允许开发人员在阴影树内部的风格,从那棵影子树外面。为了这样做,a href="#exposing-a-part" c-id="168.182.5.1">
部分必须暴露/a>
然后它可以通过使用风格a href="#how-part-works" c-id="168.185.5.3">
::部分/a>
。/p>
揭露一部分/a>
创建Shadow DOM组件时,可以通过分配A部分添加到阴影树内的元素中code c-id="168.197.5.1">
部分/code>
属于元素的属性。这将其添加到离子框架中的组件中,并且不需要最终用户的动作。betway东盟体育app
继续使用code c-id="168.203.5.1">
离子选择/code>
组件作为示例,更新标记以查看以下内容:/p>
离子选择/span>
>
#暗影根span class="token tag" c-id="168.219.7.2">
div/span>
部分/span>
=
“占位符”/span>
班级/span>
=
“选择文本/span>
选择占位符“/span>
>
/span>
div/span>
>
div/span>
部分/span>
=
“图标”/span>
班级/span>
=
“选择图标”/span>
>
/span>
div/span>
>
/span>
离子选择/span>
>
以上显示了两部分:code c-id="168.291.5.1">
占位符/code>
和code c-id="168.294.5.3">
图标/code>
。看看a href="//www.jesscamp.com/docs/api/select" target="_blank" rel="noopener noreferrer" c-id="168.297.5.5">
选择文档/a>
所有部分。/p>
随着这些部件暴露,该元件现在可以直接使用a href="#how-part-works" c-id="168.303.5.1">
::部分/a>
。/p>
如何::零件作品/a>
这a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part" target="_blank" rel="noopener noreferrer" c-id="168.315.5.1">
::部分()/code>
伪元素允许开发人员选择通过零件属性公开的影子树中的元素。/p>
因为我们知道code c-id="168.322.5.1">
离子选择/code>
暴露A.code c-id="168.325.5.3">
占位符/code>
零件用于在没有选择值时打造文本,我们可以按以下方式自定义:/p>
离子选择::零件(占位符)/span>
{
颜色/span>
:/span>
蓝色span class="token punctuation" c-id="168.344.7.7">
;/span>
不透明度/span>
:/span>
1span class="token punctuation" c-id="168.352.7.12">
;/span>
}
使用code c-id="168.361.5.1">
::部分/code>
允许更改该元素接受的任何CSS属性。/p>
除了能够瞄准部分,a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements" target="_blank" rel="noopener noreferrer" c-id="168.367.5.1">
伪元素/a>
可以在没有他们明确暴露的情况下进行风格:/p>
离子选择:: part(占位符)::第一字母/span>
{
字体大小/span>
:/span>
22px.span class="token punctuation" c-id="168.386.7.7">
;/span>
字体重量/span>
:/span>
500.span class="token punctuation" c-id="168.394.7.12">
;/span>
}
零件与大多数人一起工作a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes" target="_blank" rel="noopener noreferrer" c-id="168.403.5.1">
psuedo课程/a>
,以及:/p>
离子项目::零件(本机):悬停/span>
{
颜色/span>
:/span>
绿色span class="token punctuation" c-id="168.422.7.7">
;/span>
}
有一些已知的局限性a href="#vendor-prefixed-pseudo-elements" c-id="168.433.6.1">
供应商前缀伪元素/a>
和a href="#structural-pseudo-classes" c-id="168.436.6.3">
结构伪课程/a>
。/p>
betway东盟体育app离子框架零件/a>
离子框架部件的所有暴露部件都可以在CSS阴影部件上betway东盟体育app标题为API页面。查看所有组件及其API页面,请参阅a href="//www.jesscamp.com/docs/components" target="_blank" rel="noopener noreferrer" c-id="168.449.5.1">
组件文档/a>
。/p>
为了使部件有一个组件必须符合以下标准:/p>
-
它是一个a href="//www.jesscamp.com/docs/reference/glossary" target="_blank" rel="noopener noreferrer" c-id="168.460.6.1">
阴影DOM/a>
零件。如果是一个a href="//www.jesscamp.com/docs/reference/glossary" target="_blank" rel="noopener noreferrer" c-id="168.463.6.3">
范围/a>
或灯DOM组件,子元素可以直接瞄准。如果组件是范围或阴影,它将被其名称列出a href="//www.jesscamp.com/docs/components" target="_blank" rel="noopener noreferrer" c-id="168.466.6.5">
组件文档页面/a>
。/li>
-
它包含儿童元素。例如,code c-id="168.472.6.1">
离子卡头/code>
是一个阴影组件,但所有样式都应用于主机元素。由于它没有子元素,因此不需要零件。
-
儿童元素不是结构性的。在某些组件中,包括code c-id="168.478.6.1">
离子标题/code>
,子元素是用于定位内部元件的结构元件。我们不建议自定义结构元素,因为这可能会产生意外结果。
我们欢迎额外的建议。请创建一个a href="https://github.com/ionic-team/ionic-framework/issues/new?assignees=&labels=&template=feature_request.md&title=feat%3A+" target="_blank" rel="noopener noreferrer" c-id="168.487.6.1">
新github问题/a>
在请求零件时尽可能多的信息。/p>
已知的限制/a>
浏览器支持/a>
CSS阴影部件支持所有主要浏览器的最近版本。但是,一些旧版本不支持阴影部件。验证a href="https://caniuse.com/" target="_blank" rel="noopener noreferrer" c-id="168.506.5.1">
浏览器支持/a>
在应用程序中实现零件之前满足要求。如果需要对旧版本的浏览器支持,我们建议继续使用a href="//www.jesscamp.com/docs/theming/css-variables" target="_blank" rel="noopener noreferrer" c-id="168.509.5.3">
CSS变量/a>
用于造型。/p>
供应商前缀伪元素/a>
供应商前缀/a>
此时不支持伪元素。这将是一个例子code c-id="168.523.5.2">
:: - WebKit-ScrollBar/code>
伪元素:/p>
/ *不起作用* //span>
My-component :: part(滚动):: - webkit-scrollbar/span>
{
背景/span>
:/span>
绿色span class="token punctuation" c-id="168.545.7.9">
;/span>
}
看a href="https://github.com/w3c/csswg-drafts/issues/4530" target="_blank" rel="noopener noreferrer" c-id="168.554.5.1">
GitHub上的这个问题/a>
了解更多信息。/p>
结构伪课程/a>
然而,大多数伪课程都支持零件,a href="https://www.w3.org/TR/selectors-4/" target="_blank" rel="noopener noreferrer" c-id="168.566.5.1">
结构伪课程/a>
不是。以下不起作用的结构伪类的示例。
/ *不起作用* //span>
我的组件::零件(容器):第一孩子/span>
{
背景/span>
:/span>
绿色span class="token punctuation" c-id="168.588.7.9">
;/span>
}
/ *不起作用* //span>
My-Component :: Part(容器):上一个孩子/span>
{
背景/span>
:/span>
绿色span class="token punctuation" c-id="168.608.7.22">
;/span>
}
链接部分/a>
这code c-id="168.623.5.1">
::部分()/code>
伪元素不能额外匹配code c-id="168.626.5.3">
::部分()/code>
s。/p>
例如,code c-id="168.632.5.1">
我的组件::零件(按钮):: part(标签)/code>
不匹配任何东西。这是因为这样做会揭示比预期的更多结构信息。
如果是code c-id="168.638.5.1">
/code>
内部按钮使用类似的东西code c-id="168.641.5.3">
part =“label =>按钮标签”/code>
将按钮的内部部件转发到面板自己的零件元素映射中,然后是一个选择器code c-id="168.644.5.5">
我的组件:: part(按钮标签)/code>
将只选择一个按钮的标签,忽略任何其他标签。/p>
以前的/div>div班级="pagination__text" c-id="184.3.1.1">
CSS变量/span>
下一个/div>div班级="pagination__text" c-id="184.11.1.1">
颜色/span>
CSS阴影零件允许开发人员在影子树中的元素上进行样式CSS属性。这在定制离子框架方面非常有用betway东盟体育appa href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM" target="_blank" rel="noopener noreferrer" c-id="168.11.5.1"> 阴影DOM/a> 成分。/p>
为什么暗影零件?/a>
betway东盟体育app离子框架是一种分布式组a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank" rel="noopener noreferrer" c-id="168.23.5.1"> Web组件/a> 。Web组件跟随a href="https://w3c.github.io/webcomponents/spec/shadow/" target="_blank" rel="noopener noreferrer" c-id="168.26.5.3"> 影子DOM规范/a> 为了封装样式和标记。/p>
betway东盟体育app离子框架组件是strong c-id="168.34.6.1"> 不是所有的/strong> 影子DOM组件。如果组件是Shadow DOM组件,则会在其右上角有一个徽章a href="//www.jesscamp.com/docs/components" target="_blank" rel="noopener noreferrer" c-id="168.37.6.3"> 组件文档/a> 。Shadow DOM组件的示例是a href="//www.jesscamp.com/docs/api/button" target="_blank" rel="noopener noreferrer" c-id="168.40.6.5"> 按钮组件/a> 。/p>
Shadow DOM对于防止样式泄漏出组件并无意地申请其他元素是有用的。例如,我们分配了一个code c-id="168.47.5.1"> 。按钮/code> 班上我们code c-id="168.50.5.3"> 离子按钮/code> 零件。如果用户设置了类,则没有暗影DOM封装code c-id="168.53.5.5"> 。按钮/code> 在他们自己的一个元素上,它将继承离子框架按钮样式。betway东盟体育app自从code c-id="168.56.5.7"> 离子按钮/code> 是一个阴影组成部分,这不是问题。/p>
但是,由于这种封装,风格不能渗入阴影组件的内部元素。这意味着如果阴影组件呈现其阴影树内的元素,则内部元素不能直接与CSS定位。使用code c-id="168.62.5.1">
离子选择/code>
组件作为示例,它呈现以下标记:/p>
离子选择/span>
>
#暗影根span class="token tag" c-id="168.78.7.2">
div/span>
班级/span>
=
“选择文本/span>
选择占位符“/span>
>
/span>
div/span>
>
div/span>
班级/span>
=
“选择图标”/span>
>
/span>
div/span>
>
/span>
离子选择/span>
>
占位符文本和图标元素在内部code c-id="168.136.5.1">
#暗影根/code>
,这意味着以下CSS将strong c-id="168.139.5.3">
不是/strong>
努力风格占位符:/p>
/ *不起作用* //span>
离子选择。选择 - 占位符/span>
{
颜色/span>
:/span>
蓝色span class="token punctuation" c-id="168.161.7.9">
;/span>
}
那么我们如何解决这个问题?a href="#shadow-parts-explained" c-id="168.170.5.1"> CSS阴影部件/a> !/p>
阴影部件解释说明/a>
阴影部件允许开发人员在阴影树内部的风格,从那棵影子树外面。为了这样做,a href="#exposing-a-part" c-id="168.182.5.1"> 部分必须暴露/a> 然后它可以通过使用风格a href="#how-part-works" c-id="168.185.5.3"> ::部分/a> 。/p>
揭露一部分/a>
创建Shadow DOM组件时,可以通过分配A部分添加到阴影树内的元素中code c-id="168.197.5.1"> 部分/code> 属于元素的属性。这将其添加到离子框架中的组件中,并且不需要最终用户的动作。betway东盟体育app
继续使用code c-id="168.203.5.1">
离子选择/code>
组件作为示例,更新标记以查看以下内容:/p>
离子选择/span>
>
#暗影根span class="token tag" c-id="168.219.7.2">
div/span>
部分/span>
=
“占位符”/span>
班级/span>
=
“选择文本/span>
选择占位符“/span>
>
/span>
div/span>
>
div/span>
部分/span>
=
“图标”/span>
班级/span>
=
“选择图标”/span>
>
/span>
div/span>
>
/span>
离子选择/span>
>
以上显示了两部分:code c-id="168.291.5.1"> 占位符/code> 和code c-id="168.294.5.3"> 图标/code> 。看看a href="//www.jesscamp.com/docs/api/select" target="_blank" rel="noopener noreferrer" c-id="168.297.5.5"> 选择文档/a> 所有部分。/p>
随着这些部件暴露,该元件现在可以直接使用a href="#how-part-works" c-id="168.303.5.1"> ::部分/a> 。/p>
如何::零件作品/a>
这a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part" target="_blank" rel="noopener noreferrer" c-id="168.315.5.1">
因为我们知道code c-id="168.322.5.1">
离子选择/code>
暴露A.code c-id="168.325.5.3">
占位符/code>
零件用于在没有选择值时打造文本,我们可以按以下方式自定义:/p>
使用code c-id="168.361.5.1">
::部分/code>
允许更改该元素接受的任何CSS属性。/p>
除了能够瞄准部分,a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements" target="_blank" rel="noopener noreferrer" c-id="168.367.5.1">
伪元素/a>
可以在没有他们明确暴露的情况下进行风格:/p>
零件与大多数人一起工作a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes" target="_blank" rel="noopener noreferrer" c-id="168.403.5.1">
psuedo课程/a>
,以及:/p>
有一些已知的局限性a href="#vendor-prefixed-pseudo-elements" c-id="168.433.6.1">
供应商前缀伪元素/a>
和a href="#structural-pseudo-classes" c-id="168.436.6.3">
结构伪课程/a>
。/p>
离子框架部件的所有暴露部件都可以在CSS阴影部件上betway东盟体育app标题为API页面。查看所有组件及其API页面,请参阅a href="//www.jesscamp.com/docs/components" target="_blank" rel="noopener noreferrer" c-id="168.449.5.1">
组件文档/a>
。/p>
为了使部件有一个组件必须符合以下标准:/p>
我们欢迎额外的建议。请创建一个a href="https://github.com/ionic-team/ionic-framework/issues/new?assignees=&labels=&template=feature_request.md&title=feat%3A+" target="_blank" rel="noopener noreferrer" c-id="168.487.6.1">
新github问题/a>
在请求零件时尽可能多的信息。/p>
CSS阴影部件支持所有主要浏览器的最近版本。但是,一些旧版本不支持阴影部件。验证a href="https://caniuse.com/" target="_blank" rel="noopener noreferrer" c-id="168.506.5.1">
浏览器支持/a>
在应用程序中实现零件之前满足要求。如果需要对旧版本的浏览器支持,我们建议继续使用a href="//www.jesscamp.com/docs/theming/css-variables" target="_blank" rel="noopener noreferrer" c-id="168.509.5.3">
CSS变量/a>
用于造型。/p>
供应商前缀/a>
此时不支持伪元素。这将是一个例子code c-id="168.523.5.2">
:: - WebKit-ScrollBar/code>
伪元素:/p>
看a href="https://github.com/w3c/csswg-drafts/issues/4530" target="_blank" rel="noopener noreferrer" c-id="168.554.5.1">
GitHub上的这个问题/a>
了解更多信息。/p>
然而,大多数伪课程都支持零件,a href="https://www.w3.org/TR/selectors-4/" target="_blank" rel="noopener noreferrer" c-id="168.566.5.1">
结构伪课程/a>
不是。以下不起作用的结构伪类的示例。
这code c-id="168.623.5.1">
::部分()/code>
伪元素不能额外匹配code c-id="168.626.5.3">
::部分()/code>
s。/p>
例如,code c-id="168.632.5.1">
我的组件::零件(按钮):: part(标签)/code>
不匹配任何东西。这是因为这样做会揭示比预期的更多结构信息。
如果是code c-id="168.638.5.1">
::部分()/code>
伪元素允许开发人员选择通过零件属性公开的影子树中的元素。/p>
离子选择::零件(占位符)/span>
{
颜色/span>
:/span>
蓝色span class="token punctuation" c-id="168.344.7.7">
;/span>
不透明度/span>
:/span>
1span class="token punctuation" c-id="168.352.7.12">
;/span>
}
离子选择:: part(占位符)::第一字母/span>
{
字体大小/span>
:/span>
22px.span class="token punctuation" c-id="168.386.7.7">
;/span>
字体重量/span>
:/span>
500.span class="token punctuation" c-id="168.394.7.12">
;/span>
}
离子项目::零件(本机):悬停/span>
{
颜色/span>
:/span>
绿色span class="token punctuation" c-id="168.422.7.7">
;/span>
}
betway东盟体育app离子框架零件/a>
已知的限制/a>
浏览器支持/a>
供应商前缀伪元素/a>
/ *不起作用* //span>
My-component :: part(滚动):: - webkit-scrollbar/span>
{
背景/span>
:/span>
绿色span class="token punctuation" c-id="168.545.7.9">
;/span>
}
结构伪课程/a>
/ *不起作用* //span>
我的组件::零件(容器):第一孩子/span>
{
背景/span>
:/span>
绿色span class="token punctuation" c-id="168.588.7.9">
;/span>
}
/ *不起作用* //span>
My-Component :: Part(容器):上一个孩子/span>
{
背景/span>
:/span>
绿色span class="token punctuation" c-id="168.608.7.22">
;/span>
}
链接部分/a>