RE: [css-regions] Changed @region rule to ::region() pseudo-element

> From: howcome@opera.com
> Syntax is important. Could someone post a couple of code examples
> for common use cases that highlight the differences between the two
> (three, perhaps, with @nest?) syntax propoals?

pseudo-element only:
    
    someElement {
        abc: def;
        abc: def;
    }
    
    someElement::region(>strong) {
        abc: def;
        abc: def;
    }
    
    someElement::region(>strong:hover) {
        abc: def;
        abc: def;
    }
    
    someElement::region(>italic) {
        abc: def;
        abc: def;
    }
    
    someElement::region(>italic:hover) {
        abc: def;
        abc: def;
    }
    
combinator only:
    
    someElement {
        abc: def;
        abc: def;
    }
    
    someElement ...> strong {
        abc: def;
        abc: def;
    }
    
    someElement ...> strong:hover {
        abc: def;
        abc: def;
    }
    
    someElement ...> italic {
        abc: def;
        abc: def;
    }
    
    someElement ...> italic:hover {
        abc: def;
        abc: def;
    }
    

at-rule only:
    
    someElement {
        abc: def;
        abc: def;
    }
    
    @region someElement {
        
        :scope> strong {
            abc: def;
            abc: def;
        }
    
        :scope> strong:hover {
            abc: def;
            abc: def;
        }
    
        :scope> italic {
            abc: def;
            abc: def;
        }
    
        :scope> italic {
            abc: def;
            abc: def;
        }
        
    }
    
at-rule + nesting:
    
    someElement {
        abc: def;
        abc: def;
    }
    
    @region someElement {
        
        :scope> strong {
            abc: def;
            abc: def;
            @where :hover {
                abc: def;
                abc: def;
            }
        }
        
        :scope> italic {
            bac: def;
            abc: def;
            @where :hover {
                abc: def;
                abc: def;
            }
        }
        
    }
    
combinator + nesting:
    
    someElement {
        abc: def;
        abc: def;
        
        @then ...> strong {
            abc: def;
            abc: def;
            @where :hover {
                abc: def;
                abc: def;
            }
        }
        
        @then ...> italic {
            abc: def;
            abc: def;
            @where :hover {
                abc: def;
                abc: def;
            }
        }
        
    }
    
pseudo-element + nesting:
    
    someElement {
        abc: def;
        abc: def;
        
        @where ::region(>strong) {
            abc: def;
            abc: def;
            @where :hover {
                abc: def;
                abc: def;
            }
        }
        
        @where ::region(>italic) {
            abc: def;
            abc: def;
            @where :hover {
                abc: def;
                abc: def;
            }
        }
        
    }
    
+ <add-your-favorite-variant-here>