伪元素 ：：marker 和 ：：shadow

与标准 ::after 和 ::before 伪元素一起，Sciter 支持 ::marker 和 :shadow 伪元素。

::marker 和 ::shadow 的主要区别在于它们应该用作与元素结合的块元素。这些元素被替换，就好像它们的容器使用 flow:stack layout 并且伪元素本身是 display:block 。因此，可以使用边距来定位它们：

div { 
 size: 64px; 
 border:3px solid blue;
}
div::marker { 
 size:32px; 
 margin: 0 * * 0; /* attached to top-left corner */
 background: rgba(255,0,0,0.5);
 z-index:1; /* on top of content layer */
}

如果使用以下方法，则此类伪元素可以完全覆盖其主机元素：

div::marker { 
 size:*; /* covers whole padding box */
 background: rgba(255,0,0,0.5);
 z-index:1; /* on top of content layer */
}

::shadow 并提供 ::marker 类似的功能。如果您需要从元素的 DOM 中增加两个层，则可以同时使用它们。

 影子 DOM

在某些情况下，您可能希望在主机文档的 DOM 之外设计具有非平凡内容的复合组件。我们可以为此使用 prototype 属性：

 CSS系统

div::shade { 
 size:*; /* covers whole padding box */
 prototype: MyShadow url(shadow.js); 
}

shadow.js

class MyShadow extends Element {
 componentDidMount() {
 // note 'this' here is a shade pseudo element 
 this.content(<>
 <h1>This is shadow DOM!</h1>
 <div> 
 ... some complex content ...
 </div>
 </>);
 }
}

：：shade 子元素的内容可以使用样式集单独设置样式：

 CSS系统

div::shade { 
 style-set: MyShade;
}

@set MyShade {
 :root { ... } /* style of ::shade itself */
 :root:hover { ... } /* style of ::shade itself */
 /*... other rules for children go here */
}