带有 Angular 组件的 Safari 中的粘性位置

Question

所以，position: sticky很棒，对吧？Angular 也是，对吧？与 Firefox 和 Chrome 结合使用效果很好。问题始于 Safari。

如果您构建的 Angular 组件中包含一个position: stickydiv 作为模板中的第一个元素，Safari 不知道如何处理它。例子：

应用组件：

@Component({
  template: '<sticky-component></sticky-component>'
})
export class AppComponent {}

粘性组件：

@Component({
  selector: 'sticky-component',
  template: '<div class="sticky">Should be sticky</div>',
  styles: [
    `
      .sticky {
        position: sticky;
        position: -webkit-sticky;
        top: 0;
      }
    `
  ]
})
export class StickyComponent {}

这将生成一个 DOM，如：

...
<sticky-component>
  <div class="sticky"></div>
</sticky-component>
...

如果物理写出来的HTML没有了<sticky-component>它在Safari的伟大工程。但是由于粘性元素的父元素是宿主元素，所以这失败了。尝试将粘性 CSS 添加到宿主元素似乎也不起作用。有没有人遇到过这个问题或有任何解决方案？我知道我可以使用 Angular 中的事件侦听器来实现这种粘性功能，但position: sticky要容易得多。

StackBlitz 示例：https ://stackblitz.com/edit/angular-jede8a （适用于 Chrome/Firefox，但不适用于 Safari）

Answer 1

^{_{这更多的是一种解决方法，可能不适合您的需求，但我想它值得一个答案，因为它确实解决了问题（不一定以您希望的方式）。}}

如果 Safari 的问题是 DOM 中使用的自定义元素（带有破折号），您可以通过指定不同的选择器来解决这个问题。代替

selector: 'sticky-component',

你可以有

selector: 'div[sticky-component]',

然后通过添加属性来使用该组件。

<div sticky-component></div>

尽管在此用例中肯定不理想，但这是定义组件的有效方法。事实上，它通常是通过自定义按钮完成的——例如，Material 本身就使用这种模式：<button mat-button>。